如何实现表格布局而不使用表格? [英] How to achieve table layout without using tables?
本文介绍了如何实现表格布局而不使用表格?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
例如,这是我的表:
以进度(和学习)的名义,我如何从代码中删除表并实现相同的布局? / p>
< table cellspacing =0px>
< 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>条款和条件|隐私政策|网站地图< / p为H.
< / td>
< td id =footertext>
< p>订阅我们的新闻稿:< / p>
< img src =http://www.poltairhomes.com/images/signup(temp).png/>
< / td>
< / tr>
< / table>
和相关的CSS:
.footertext {
margin:0;
padding:0 5px 0 5px;
颜色:#AAA;
font-size:10px;
font-family:Arial,Helvetica,sans-serif;
text-align:center;
border-left:1px solid #CCC;
}
http://jsfiddle.net/userdude/tYjKw/
解决方案
创建样式为:
.footerItem {float:left; }
< div class =footerItem> < img src =http://www.poltairhomes.com/images/footerlogo.png/> < / DIV> < 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> < div class =footerItem> < p>条款和条件|隐私政策|网站地图< / p为H. < / DIV> < div class =footerItem> < p>注册我们的新闻稿:< / p>< img src =http://www.poltairhomes.com/images/signup(temp).png/> < / div>
然后使用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屋!
查看全文