在網頁布局中,讓多個框(如div)并列是常見的需求。CSS提供了多種方式來實現這個目標。下面,我們將介紹幾種常用的方法。
/* 第一種方法:采用浮動 */ .box{ float: left; width: 30%; margin-right: 10px; } /* 第二種方法:采用flex布局 */ .container{ display: flex; flex-wrap: wrap; } .box{ flex: 0 0 30%; margin-right: 10px; } /* 第三種方法:采用grid布局 */ .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
以上三種方法都能很好地解決框并列的問題,具體選擇哪一種應該根據具體情況而定。使用浮動時,需要注意清除浮動;使用flex或grid布局時,需要多考慮瀏覽器兼容性。