Html 如何使用 div 而不是表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17773186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use divs instead of tables
提问by alias51
I am trying to create the following table layout, but I want to use DIV instead of TABLE:
我正在尝试创建以下表格布局，但我想使用 DIV 而不是 TABLE：
------------------
| | |
| CELL1 | CELL2 |
| | |
| |--------|
| | |
| | CELL3 |
| | |
------------------
I want the height of all the cells to be set by their content (i.e. no height: style)
我希望所有单元格的高度由它们的内容设置（即没有高度：样式）
I have tried using float:left on cell1, but can't seem to get cells 2 and 3 to behave.
我曾尝试在单元格 1 上使用 float:left，但似乎无法让单元格 2 和 3 发挥作用。
EDITJS Fiddle here: http://jsfiddle.net/utZR3/
在这里编辑JS 小提琴：http: //jsfiddle.net/utZR3/
HTML:
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:
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;
}
采纳答案by frenchie
You need inline-blockand float: here's the jsFiddle
你需要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;}
Also, since you're not using relativeor absolutepositioning, you don't need to specify topand left.
此外，由于您没有使用relative或absolute定位，因此无需指定top和left。
回答by Yotam Omer
Try the following: (working jsFiddle)
尝试以下操作：（工作 jsFiddle）
HTML:
HTML：
<div class="container">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
CSS:
CSS：
.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}
Your approach (which places the divs in rows) is not a good choice in this case.. mine separates them by columns.
div在这种情况下，您的方法（将s 放在行中）不是一个好的选择。我的将它们按列分开。
回答by Dolchio
You could use display:inline-blockinstead of float. Just set widths of about 50% (adjust depending on padding, margins and borders) for the left and right containers and make them inline-block.
您可以使用display:inline-block代替float. 只需为左右容器设置大约 50% 的宽度（根据填充、边距和边框进行调整）并使它们成为内联块。
回答by G-Cyrillus
rowspan is not avalaible for display:table,
but you can still use it to get close to what you are looking for.
http://codepen.io/anon/pen/kqDabdisplay:inline-tableused for the show , so they stand aside each others. you can turn it back to display:table.
rowspan 不适用于 display:table，
但您仍然可以使用它来接近您要查找的内容。
http://codepen.io/anon/pen/kqDabdisplay:inline-table用于表演，所以他们站在一边。你可以把它转回display:table.
Options i see here is to set an height to parent container to have height:XX% avalaible for direct childs element (if it is: float, inline-block, table ...) .
Other option is vertical-align middle for the cell if display:table-cell;.
我在这里看到的选项是为父容器设置一个高度，使其具有 height:XX% 可用于直接子元素（如果它是：float、inline-block、table ...）。其他选项是单元格的垂直对齐中间，如果display:table-cell;。
You HTML with the same CSS of first demo : http://codepen.io/anon/pen/dvlsG
你的 HTML 与第一个演示的 CSS 相同：http: //codepen.io/anon/pen/dvlsG
editdisplay:flexis also a good option nowdays :http://codepen.io/anon/pen/aBjqXJ
现在编辑display:flex也是一个不错的选择：http: //codepen.io/anon/pen/aBjqXJ
回答by mohammad feiz
<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>
use display grid for using div instead of table
使用显示网格来使用 div 而不是 table
