Создайте два столбца, каждый из которых содержит два столбца, равные высоты.

Question

Я пытаюсь создать контейнер с двумя столбцами, каждый из которых имеет по два столбца с одинаковыми высотами, используя только CSS.

Проблема: две колонки внутри их основного столбца не совпадают с двумя другими столбцами внутри их основного столбца.

В идеале, я хотел бы использовать метод, используя display: table; и display: table-cell;. Я предпочитаю не использовать гибкую коробку из-за совместимости с IE.

Просмотреть JSFiddle.

Я могу добиться внешнего вида Я хочу, удалив два divs, служащие в качестве двух основных столбцов, и сделайте четыре отдельных div (каждая из которых является ячейкой таблицы), все с равными высотами; однако это не идеально.

Я ценю любые предложения или помощь.

Answer 1

Это решение - лучший способ сделать это, о котором я могу думать, однако вам нужно будет изменить свой HTML-код.

Я могу добиться желаемого вида, удалив два div, служащих в качестве двух основных столбцов, и сделаю четыре отдельных div (каждая из которых является ячейкой таблицы), все с равными высотами; однако это не идеально.

Я не был уверен, что вы имели в виду определение высот, но это мое решение в любом случае.

html { 
 
    font: 16px Arial, sans-serif; 
 
} 
 
.container { 
 
    border: 1px solid #586478; 
 
    display: table; 
 
    padding: 5px; 
 
    table-layout: fixed; 
 
} 
 
.content { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 20px; 
 
    color: #fff; 
 
    width:25%; 
 
} 
 
.cell:nth-child(even) {color: #586478;} 
 
.column { 
 
    background: #586478; 
 
    display: table-column; 
 
    height: 100%; 
 
} 
 
.column:nth-child(even) { 
 
    background: #eee; 
 
}

<div class="container"> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="content"> 
 
    <div class="cell">Shorter description.</div> 
 
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div> 
 
    <div class="cell">Longer description.</div> 
 
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing 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> 
 
</div>

Этот метод использует display: table-column;, который в основном говорит остальную часть строк и ячеек, которые они должны заполнить высоту стола.

Просто для того, чтобы понять, что здесь происходит, я все изменил с div на соответствующие теги.

td{ 
 
    vertical-align: top; 
 
    width:25%; 
 
    color: #fff; 
 
    padding: 20px; 
 
} 
 
td:nth-child(even) {color: #586478} 
 
col {background: #586478;} 
 
col:nth-child(even) {background: #eee;}

<table> 
 
    <colgroup> 
 
    <col><col><col><col> 
 
    </colgroup> 
 
    <tr> 
 
    <td>Shorter description.</td> 
 
    <td> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing 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.  
 
    </td> 
 
    <td>Longer description.</td> 
 
    <td> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing 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  
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Вот альтернативный метод, который использует поплавки и т.д. и нет макета таблицы вещей. Магия происходит с margin-bottom: -99999px; padding-bottom: 99999px;. Однако он изменяет ваш HTML. Запустите фрагмент, чтобы увидеть, как он работает.

html { 
 
    font: 16px Arial, sans-serif; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    border: 1px solid #586478; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
} 
 
.column { 
 
    float: left; 
 
    background: #586478; 
 
    color: #fff; 
 
    height: 100%; 
 
    padding: 20px; 
 
    text-align: left; 
 
    width: 25%; 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
} 
 
.column:nth-child(even) { 
 
    background: #eee; 
 
    color: #586478; 
 
}

<div class="container"> 
 
    <div class="column">Shorter description.</div> 
 
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    <div class="column">Longer description.</div> 
 
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing 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 style="clear:both;"></div> 
 
</div>