在設計網頁時,我們經常需要將多個div
元素并排顯示,這時就需要用到 CSS 的布局功能。下面我們就學習一下具體方法。
首先我們要給這些div
元素統一設置樣式,比如設置寬度、高度、邊框等基本樣式。
div { width: 200px; height: 100px; border: 1px solid #000; }
接著,我們可以使用以下兩種方法實現多個div
元素并排顯示:
方法一:使用浮動屬性
將多個div
元素都設置為浮動狀態,再給它們的容器設置一個清除浮動的樣式即可。
.container { overflow: hidden; } div { float: left; }
方法二:使用 Flex 布局
在容器中設置display: flex;
,即可將內部的子元素排列成一行,不需要再給子元素設置浮動。
.container { display: flex; } div { /* 可以根據需要設置 margin、padding 等樣式 */ }
以上兩種方法都可以達到多個div
并排顯示的效果,我們可以根據實際需要進行選擇。