Как использовать divs вместо таблиц

Я пытаюсь создать следующий макет таблицы, но я хочу использовать DIV вместо TABLE:

------------------
|       |        |
| CELL1 |  CELL2 |
|       |        |
|       |--------|
|       |        |
|       |  CELL3 |
|       |        |
------------------

Я хочу, чтобы высота всех ячеек устанавливалась по их содержимому (т.е. высота: стиль)

Я попытался использовать float: left on cell1, но не может заставить ячейки 2 и 3 вести себя.

ИЗМЕНИТЬ JS Fiddle здесь: http://jsfiddle.net/utZR3/

HTML:

<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>

CSS

.list-row {
    background:#f4f4f4;
    border:2px solid red;
}

.list-left {
    width:auto;
    padding:10px;
    top:0px;
    left:0px;
    border: 2px solid blue;
}
.list-right {
    top:0px;
    left:60px;
    padding:10px;
     border:2px solid green;
}
.list-title {

    font-size:18px;
    padding:8px;

}
.list-filters {
    padding:8px;

}

Ответы

Ответ 1

Вам нужны inline-block и float: здесь jsFiddle

.list-row {
    background:#f4f4f4;
    display:inline-block;
    border:2px solid red;}

.list-left {
    width:auto;
    padding:10px;
    float:left;
    border: 2px solid blue;}

.list-right {
    padding:10px;
    float:right;
    border:2px solid green;}

Кроме того, поскольку вы не используете позиционирование relative или absolute, вам не нужно указывать top и left.

Ответ 2

Попробуйте следующее: (рабочий jsFiddle)

HTML:

<div class="container">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
</div>

CSS

.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}

Ваш подход (который помещает div в строках) не является хорошим выбором в этом случае.. mine разделяет их по столбцам.

Ответ 3

Вы можете использовать display:inline-block вместо float. Просто установите ширину около 50% (отрегулируйте в зависимости от заполнения, полей и границ) для левого и правого контейнеров и сделайте их встроенным блоком.

Вот мой jsFiddle

Ответ 4

rowspan не отображается для отображения: table,
но вы все равно можете использовать его, чтобы приблизиться к тому, что вы ищете.
http://codepen.io/anon/pen/kqDab
display:inline-table, используемые для шоу, поэтому они стоят в стороне друг от друга. вы можете вернуть его обратно в display:table.

Параметры, которые я вижу здесь, это установить высоту для родительского контейнера с высотой: XX% доступно для прямого элемента childs (если это: float, inline-block, table...). Другая опция - выравнивание по вертикали для ячейки, если display:table-cell;.

Вы HTML с тем же CSS первой демонстрацией: http://codepen.io/anon/pen/dvlsG

edit display:flex также является хорошим вариантом сегодня: http://codepen.io/anon/pen/aBjqXJ