CSS 中盒子并列是指在同一行或同一列中,將多個盒子按照一定的規則排列在一起的布局方式。下面我們來看一些實現盒子并列的方法。
// 水平排列 .container { display: flex; justify-content: space-between; // 將子元素平均分布在容器內 } // 垂直排列 .container { display: flex; flex-direction: column; // 將子元素按列排列 align-items: center; // 子元素居中 } // 兩列布局 .container { display: flex; } .container .left { width: 50%; } .container .right { width: 50%; } // 多列布局 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; // 相鄰格子之間的間隔 } .container .item { background-color: #eee; height: 100px; }
上述代碼中,display 屬性是實現盒子并列布局的必要條件,而其他屬性則是根據具體情況進行調整的。需要注意的是,在使用盒子并列布局時,要確保各個盒子的內容大小和排列方式是一致的。
上一篇css 盒子模型知乎
下一篇css 盒模型層次