Вопрос по html, css – Как использовать div вместо таблиц

18

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

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

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

Я пытался использовать float: left на 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 за хороший рисунок, любой код? :) dbf
Я считаю, что левая ячейка расширяет ячейки справа по оси Y, и с шириной-s, в зависимости от содержимого, это возможно только с таблицами el Dude
нет структуры HTML и CSS. Вы должны показать нам, что вы пытались G-Cyr

Ваш Ответ

5   ответов
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;}

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

1

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

Вот мой jsFiddle

13

Тебе нужно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.

Также взгляните на CSS word-wrap; на всякий случай кто-то печатает 1000 символов без пробелов. frenchie
спасибо, добавил максимальную ширину к правому div и отлично работает alias51
0
<style>
.grid-container {
   display: grid;
} 
</style>
<div class="grid-container">
   <div class="grid-item">1</div>
   <div class="grid-item">2</div>
   <div class="grid-item">3</div>
   <div class="grid-item">4</div>
   <div class="grid-item">5</div>
   <div class="grid-item">6</div>
   <div class="grid-item">7</div>
   <div class="grid-item">8</div>
   <div class="grid-item">9</div>
</div> 

1


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

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

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

редактировать display:flex также хороший вариант в наши дни:http://codepen.io/anon/pen/aBjqXJ

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