CSS-укладка div с переменной высотой на два столбца

Итак, я работаю на странице профиля пользователя на своем веб-сайте. И у меня небольшая проблема с CSS.

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

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

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

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

Информационный блок CSS-класса выглядит следующим образом:

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

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

Ответы

Ответ 1

За исключением вложения ваших 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 Masonry. Здесь скрипка, демонстрирующая ее использование.

Ответ 2

Вы можете поместить ящики в столбцы как это. Это очень простая сетка, но она показывает основную идею: вы складываете свои ящики внутри div-контейнеров, которые формируют столбцы.

Если вы повторите этот шаблон во всем своем сайте, вы можете использовать более формализованную сетку. Многие примеры можно найти, просто выполнив поиск "css grid system".

Ответ 3

Я рекомендую разделить содержимое на два столбца:

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%;}

UPDATE: поля внутри столбцов не нужно плавать, если вы используете это решение

Ответ 4

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

Ответ 5

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

#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>