如何在不使用表格的情况下实现表格布局? [英] How to achieve table layout without using tables?
问题描述
以进步(和学习)的名义,我怎样才能从我的代码中删除表格并实现相同的布局?
例如,这是我的表:
<tr><td><img src="http://www.poltairhomes.com/images/footerlogo.png"/></td><td id="footertext"><p>Poltair Homes Plc<br/>注册办事处:The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br/>在英格兰注册&威尔士:3955425<br/>www.poltairhomes.com<br/>info@poltairhomes.com</p></td><td id="footertext"><p>条款和条件 |隐私政策 |网站地图</td><td id="footertext"><p>注册我们的时事通讯:</p><img src="http://www.poltairhomes.com/images/signup(temp).png"/></td></tr>
以及相关的 CSS:
.footertext {边距:0;填充:0 5px 0 5px;颜色:#AAA;字体大小:10px;字体系列:Arial、Helvetica、sans-serif;文字对齐:居中;左边框:1px 实心 #CCC;}
http://jsfiddle.net/userdude/tYjKw/
创建样式为:
.footerItem { float: left;}
<div class="footerItem"><p>Poltair Homes Plc<br/>注册办事处:The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br/>在英格兰注册&威尔士:3955425<br/>www.poltairhomes.com<br/>info@poltairhomes.com</p>
<div class="footerItem"><p>条款和条件 |隐私政策 |网站地图
<div class="footerItem"><p>注册我们的时事通讯:</p><img src="http://www.poltairhomes.com/images/signup(temp).png"/>
然后使用 DIV 创建主体以分隔块并将类应用于每个块:
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 />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>
And the relevant 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;
}
http://jsfiddle.net/userdude/tYjKw/
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 />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>
and then create your body using DIVs to separate the blocks and apply the class to each one:
这篇关于如何在不使用表格的情况下实现表格布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!