如何使用 div 代替表格答案

【问题标题】：How to use divs instead of tables如何使用 div 代替表格
【发布时间】：2013-07-20 08:07:36
【问题描述】：

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

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

我希望所有单元格的高度由它们的内容设置（即没有高度：样式）

我已尝试在单元格 1 上使用 float:left，但似乎无法让单元格 2 和 3 正常运行。

编辑 JS 小提琴在这里：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 画得漂亮，有代码吗？ :)
没有 HTML 结构也没有 CSS。你应该告诉我们你尝试了什么
我相信，左边的单元格通过 Y 轴扩展右边的单元格，并且宽度为 s，取决于内容，这只有在表格中才有可能

标签： html css

【解决方案1】：

尝试以下操作：(working 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 放在行中）不是一个好的选择。我的方法是按列分隔它们。

【讨论】：

【解决方案2】：

您可以使用display:inline-block 代替float。只需为左右容器设置大约 50% 的宽度（根据内边距、边距和边框进行调整）并将它们设置为 inline-block。

Here is my jsFiddle

【讨论】：

【解决方案3】：

您需要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 个没有空格的字符。

【解决方案4】：

rowspan 不适用于 display:table,
但是您仍然可以使用它来接近您正在寻找的东西。
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

【讨论】：

【解决方案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>

使用显示网格来使用 div 而不是 table

【讨论】：