html – 如何在不使用表的情况下实现表格布局?
发布时间:2020-12-14 21:15:17 所属栏目:资源 来源:网络整理
导读:以进度(和学习)的名义如何从代码中删除表并实现相同的布局? 例如,这是我的表: table cellspacing="0px" tr td img src="http://www.poltairhomes.com/images/footerlogo.png" / /td td id="footertext" pPoltair Homes Plcbr /Registered Office: The Old
以进度(和学习)的名义如何从代码中删除表并实现相同的布局?
例如,这是我的表: <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; } 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 />Registered Office: The Old Chapel,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创建您的身体以分隔块并将类应用于每个块: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |