以进度(和学习)的名义如何从代码中删除表并实现相同的布局?
例如,这是我的表:
<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 />info@poltairhomes.com</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>
相关的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;
}
答案 0 :(得分:16)
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
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>
答案 1 :(得分:9)
<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>
和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%;}
我建议你研究一些网格系统,比如960grid(http://960.gs/)或1140grid(http://cssgrid.net/),会对你有所帮助。
答案 2 :(得分:2)
创建一个样式:
.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 />info@poltairhomes.com</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>
然后使用DIV创建您的身体以分隔块并将类应用于每个块: