在日常的网页设计中,我们经常遇到div层的问题,一般情况下,如果我们想把两个Div层放在同一行,只需要用display:inline就可以做到了,那么您有没有想到过把五个div层放在同一行显示呢?下面就把实例代码送给大家,感谢对烈火网的支持与厚爱。 实例代码: <html> <head> <title>一种5个DIV并排在一行的方法 - Liehuo.net</title> <style type="text/css"> #bottom { margin:0 auto;/*下边居是0 */ width:600px; } #bottom div { width:120px; } #d1 { float:left; background:#f00; } #d2 { float:right; background:#0f0; } #d3 { float:right; background:#00f; } #d4 { float:right; background:#00f; } #d5 { float:right; background:#00f; } </style> </head> <body> <div id="bottom"> <div id="d3">liehuo.net - d3</div> <div id="d1">liehuo.net - d1</div> <div id="d2">liehuo.net - d2</div> <div id="d4">liehuo.net - d4</div> <div id="d5">liehuo.net - d5</div> </div> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 CSS3 target 和 focus 伪类 (附演示)HTML 的优化杂记