具有等間距DIV 的流體寬度容器
您有一個具有流體寬度的容器DIV,並且您想要在其中放置四個DIV容器。每個 DIV 的大小應為 300px x 250px。您希望框 1 向左浮動,框 4 向右浮動,框 2 和 3 在框 1 和 4 之間均勻間隔。此外,您希望間距靈活,可根據瀏覽器視窗的大小進行調整。
解決方案:
要實現此目的,請使用以下方法代碼:
#container { border: 2px dashed #444; height: 125px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } .box1, .box3 { background: #ccc } .box2, .box4 { background: #0ff }
<div>
此解決方案利用以下技術:
以上是如何創建具有等間距 DIV 的流體寬度容器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!