Html 如何在不使用表格的情况下实现表格布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11049149/
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 achieve table layout without using tables?
提问by bigtoothmedia
In the name of progress (and learning) how can I rid tables from my code and achieve the same layout?
以进步（和学习）的名义，如何从代码中删除表格并实现相同的布局？
For example, here is my table:
例如，这是我的表：
<table cellspacing="0px">
<tr>
<td>
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</td>
<td id="footertext">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />[email protected]</p>
</td>
<td id="footertext">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</td>
<td id="footertext">
<p>SIGN UP FOR OUR NEWSLETTER:</p>
<img src="http://www.poltairhomes.com/images/signup(temp).png" />
</td>
</tr>
</table>
And the relevant CSS:
以及相关的 CSS：
.footertext {
margin: 0;
padding:0 5px 0 5px;
color: #AAA;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #CCC;
}
采纳答案by Dave
Create a style as:
创建一个样式：
.footerItem { float: left; }<div class="footerItem">
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</div>
<div class="footerItem">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />[email protected]</p>
</div>
<div class="footerItem">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</div>
<div class="footerItem">
<p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" />
</div>and then create your body using DIVs to separate the blocks and apply the class to each one:
然后使用 DIV 创建主体以分隔块并将类应用于每个块：
回答by
CSS:
CSS：
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
HTML:
HTML：
<div class="table">
<div class="table-row">
<div class="table-cell">Table cell 1</div>
<div class="table-cell">Table cell 2</div>
</div>
</div>
回答by zbrukas
<div class="table">
<div class="row">
<div class="cell twocol">
<span>Content1</span>
</div>
<div class="cell twocol">
<span>Content2</span>
</div>
</div>
<div class="row">
<div class="cell onecol">
<span>Content3</span>
</div>
</div>
</div>
And the CSS
和 CSS
.table {width: 100%; height: 100%;}
.row {width: 100%; min-height: 1px; height: auto; margin: 0;}
.cell {float: left; margin: 0; padding: 0;}
.onecol {width: 100%;}
.twocol {width: 50%;}
I suggest you look into some gridsystems, like 960grid (http://960.gs/) or 1140grid (http://cssgrid.net/), will help you a lot.
我建议你研究一些网格系统，比如 960grid (http://960.gs/) 或 1140grid (http://cssgrid.net/)，会对你有很大帮助。
