如何使用div代替表格

Question

我正在尝试创建以下表格布局，但我想使用DIV代替TABLE：

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

我希望所有单元格的高度都由它们的内容确定（即不使用height:样式）

我尝试在cell1上使用float:left，但好像无法让cell2和cell3表现正常。

编辑 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;

}

- alias51

---

+1 对于好的图形，有任何代码吗？ :) - dbf

把以下與程式設計有關的內容從英文翻譯成中文。只需返回翻譯後的文本:不需要HTML結構和CSS。 - G-Cyrillus

我认为左边的单元格在Y轴上扩展右边的单元格，并且具有依赖于内容的宽度s，这只有使用表才能实现。 - el Dude

Answer 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。

- frenchie

---

另外，看一下CSS的word-wrap；以防万一有人输入1000个没有空格的字符。 - frenchie

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

你的方法（将

放在行中）在这种情况下不是一个好选择，我的方法通过列进行分离。

- Yotam Omer

Answer 3

你可以使用display:inline-block代替float。只需将左右容器的宽度设置为约50％（根据填充，边距和边框进行调整），并使它们成为内联块。

这是我的jsFiddle

- Dolchio

Answer 4

rowspan在display:table中不可用，但您仍然可以使用它来接近您要查找的内容。
http://codepen.io/anon/pen/kqDab
display:inline-table用于显示，因此它们彼此并排。您可以将其改回display:table。

我在这里看到的选项是设置父容器的高度，以便直接子元素（如果是：float、inline-block、table等）具有可用的height:XX%。 另一种选择是对单元格使用垂直居中，如果display:table-cell;。

您的HTML与第一个演示相同的CSS：http://codepen.io/anon/pen/dvlsG

---

编辑 display:flex 现在也是一个不错的选择：http://codepen.io/anon/pen/aBjqXJ

- G-Cyrillus

Answer 5

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

使用display grid来代替table布局

- mohammad feiz