Выровняйте 2 DIV на линию, оба с одинаковой высотой

1

У нас есть проблема, когда нам нужно иметь список div с динамическим контентом. В строке всегда будет 2 div. Оба эти элемента должны иметь одинаковую высоту.

В настоящее время у нас есть решение, которое устанавливает высоту ящиков с JavaScript, но оно не очень эффективно, поскольку оно пересчитывает размеры при каждом изменении размера (отзывчивый дизайн).

Есть ли решение без фиксированных значений высоты?

Важно: ящики по-прежнему должны быть дополнены, а заполнение должно быть в процентах (в настоящее время 4% маржи на div)

Jsfiddle: http://jsfiddle.net/6dmwU/

<div class="boxes">
    <div class="box-wrapper">
        <div class="box" style="height: 203px;">
            <p class="box-title">Lorem Vulputate</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
        <div class="box" style="height: 203px;">
            <p class="box-title">Egestas Pharetra</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
    </div>
    <div class="box-wrapper">
        <div class="box" style="height: 151px;">
            <p class="box-title">Vulputate Egestas</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
        <div class="box" style="height: 151px;">
            <p class="box-title">Egestas Pharetra</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
    </div>
</div>

Любая помощь будет очень оценена

  • 0
    Если использование divs не является обязательным требованием, как насчет таблицы?
  • 0
    Из-за доступности мы не должны использовать таблицы, если есть какой-либо другой способ.
Показать ещё 3 комментария
Теги:

4 ответа

2
Лучший ответ

Для этого вы можете использовать гибкую модель:

.boxes .box 
{
    margin-left: 2%;
    margin-bottom: 2%;
    width: 50%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;
}

.box-wrapper
{
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

jsFIddle

Таким образом, каждая строка будет высотой самого высокого дочернего элемента. Однако поддержка этого ограничена.

Поэтому, если вы не используете этот метод, вы можете преобразовать структуру в структуру таблицы. Таким образом, каждая строка будет высотой самого высокого дочернего элемента.

.boxes .box 
{
    display: table-cell;
    margin-left: 2%;
    margin-bottom: 2%;
    width: 50%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;

}

.box-wrapper
{
    display: table-row;
}

.boxes
{
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}

Поскольку маркер не работает между табличными ячейками, я использовал border-spacing для определения разделения между ячейками.

jsFiddle

Поделиться
  • 0
    Первое решение было бы идеальным, но оно не поддерживается в IE9, что, к сожалению, является требованием для этого проекта. Второе решение использует интервал границы, который не допускает значения в процентах, только пиксель, em и т. Д.
1

Попробуй это

.boxes .box {
    float: left;
    margin-left: 2%;
    margin-bottom: 2%;
    width: 38%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;
    display:inline-block
}
.box-wrapper,.boxes{
        display:inline-block;
        width:100%;
}

скрипка

Поделиться
  • 0
    Это не соответствует требованию отсутствия встроенных высот
  • 0
    очистить ваши комментарии ник
0

Я использую flexbox, это волшебство ^^:

HTML

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.boxes {
  display: flex;
  flex-wrap: wrap;
}
.box {
   margin: 0 1% 1% 0;
   width: 48%;
}

КОДЕПЕН ДЕМО

Полное руководство по flexbox на css-trick

Поделиться
0

Взгляните на эту скрипку. Вы можете использовать display:table-cell;

CSS:

.row {
    display: table;
    width: 100%;
}
.left {
    width:50%;
    background: blue;
    display:table-cell;
}
.right {
    width:50%;
    background: red;
    display:table-cell;
}

HTML

<div class='row'>
    <div class='left'>

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    </div>
    <div class='right'>

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos

    </div>    
</div>
Поделиться
  • 0
    Это то, что мы попробовали в первую очередь, но вы не можете иметь запас для div
  • 0
    Вы можете имитировать один, добавив границу к одной / всем сторонам с цветом, установленным на фон

Ещё вопросы

Сообщество Overcoder
Наверх
Меню