Вопрос по css, html – CSS-стек с переменной высотой на два столбца

11

Так что я'Я работаю на странице профиля пользователя на моем сайте. И я'У меня небольшая проблема с CSS.

Моя проблема заключается в следующем: у меня есть четыре блока div с фиксированной шириной, но с переменной высотой, и я хотел бы, чтобы они складывались один поверх другого.

Картинка внизу - скриншот моего выпуска, div с заголовкомПоследние видео " должен быть приклеен к одному сбазовая информация" заглавие. Подобно "Контактная информация" а также "Последнее фото " являются.

Мой HTML выглядит примерно так:


    
        Content goes here for basic info
    
    
        Content goes here for contact info
    
    
        Content goes here for latest photos
    
    
        Content goes here for latest videos
    

Класс CSS для информационного блока выглядит так:

.infoBox {
    width: 100%;
    margin: -1px; 
    background-color:#37312d;
    padding:5px;
    border:#5b504a solid 1px;
    margin-bottom:9px;
    float:left;
}

Как я могу сделать, чтобы эта работа?

этот вопрос может быть полезнымstackoverflow.com/questions/10302056/... Paradise
Я чувствую, что здесь что-то не так. я сделалскрипка в котором я сделал контейнер760px широкий, и все выстраивается. Есть ли что-то еще в CSS здесь? Возможно, тампроблема с самим контентом? Eric
Вы'переместив их все налево, я представляю, что плавающие два вправо и два влево получат то, что выищете, или я что-то упустил? Paolo Bergantino
@Eric: Этопотому что все они имеют одинаковую высоту; попробуйте добавить дополнительный контент к ним:jsfiddle.net/7pm67/2 - и затем, если вы выпустите два из них правильно, это выглядит так, как задумано:jsfiddle.net/7pm67/3 Paolo Bergantino

Ваш Ответ

5   ответов
1

которое я нашел для этой проблемы, состоит в том, чтобы пометить каждое сообщение классом .odd и .even или .left и .right, а затем просто плавать слева от нечетного / левого сообщения и справа от четного / правого сообщения. Обратите внимание, что это работает только визуально, если ширина столбцов в сумме соответствует ширине их контейнера. Затем, чтобы эта работа работала на экранах различных размеров, просто добавьте запрос @media, чтобы изменить плавающее число для четных / правых записей, оставляемых на экранах, меньших ширины контейнера с двумя столбцами.

Похоже, у вас есть код, которым вы могли бы поделиться? Stefan Neubert
1

вот так, Это очень простая система сетки, но она показывает основную идею: выперекладываем ваши коробки внутри упаковщиков, которые образуют столбцы.

Если ты'Я буду повторять этот шаблон по всему вашему сайту, вы можете использовать более формализованную систему сетки. Многие примеры можно найти, просто выполнив поискCss Grid System ".

1

HTML:

<div style="margin-left:-10px">
    <div class="column">
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for basic info
        </div>
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for latest videos
        </div>
    </div>
    <div class="column">
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for contact info
        </div>
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for latest photos
        </div>
    </div>
</div>

и в вашем CSS добавьте:

.column{float:left; width:50%;}

ОБНОВЛЕНИЕ: коробки внутри столбцов нене нужно плавать, если вы используете это решение

спасибо @Mike, я только что исправил Forte L.
Единственное изменение, которое я хотел бы сделать, это сделатьcolumn класс, а не идентификатор, так как вы хотите поделиться этим между несколькими элементами. mclark1129
Это может сработать, яЯ собираюсь попробовать и посмотреть, если это практическое решение. :) Joris Blanc
0

Вы можете попробовать с этим кодом

#bottom{
    width: ???px;
    height: ???px;
    background-color: black;
}
#top{
    width:???px;
    height:???px;
    background-color:red;
    z-index: 999;
}


<div id="bottom">
    <div>......</div>
  <div id="top">......</div>
</div>
6

Вложите ваши div в столбцы:

<div class="left-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>
<div class="right-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>

ты можешь попробоватьjQuery масонство.Вот'скрипка демонстрируя его использование.

Да, я знаю, но я как бы прыгал за динамический способ обработки CSS, без необходимости в вложенных элементах div. Joris Blanc
Проверь это и датьтретий вариант выстрел. Это's чистый CSS (хотя CSS3) и будет работать в текущих версиях Firefox и Chrome. crowjonah
Отличная связь, и я думаю, что это будет более гибко дать Джорис то, что он хочет. + 1I» KRyan
На этой странице множество CSS-решений!Вот'еще одна скрипка используя вложенные div в качестве столбцов. crowjonah
Я собираюсь разобраться в этом, хотя я бы предпочел решение, которое нене включать JavaScript. Спасибо Joris Blanc

Похожие вопросы