CSS是一種用于設置HTML元素樣式的語言。其中,設置div元素的樣式非常常見,下面我們來看一下如何設置兩個div的樣式。
這是第一個div元素的內容
這是第二個div元素的內容
首先,我們需要定義一個包含這兩個div元素的容器元素,可以為其添加一個類名為“container”,然后添加兩個內部的div元素,分別為“box1”和“box2”。
.container { display: flex; /* 設置容器為Flex布局 */ justify-content: space-between; /* 設置兩個div元素之間的距離為相等 */ } .box1, .box2 { width: 200px; /* 設置每個div元素的寬度 */ height: 200px; /* 設置每個div元素的高度 */ background-color: #ccc; /* 設置每個div元素的背景顏色 */ padding: 20px; /* 設置每個div元素的內邊距 */ }
接下來,我們在CSS樣式表中添加樣式來設置每個div元素的樣式。我們使用Flex布局將容器元素設置為Flex布局,并使用“justify-content: space-between”來設置兩個div元素之間的距離相等。
接著,我們可以分別為每個div元素設置寬度、高度、背景顏色和內邊距等樣式。這里我們將每個div元素的寬度和高度都設置為200px,并將背景顏色設置為#ccc。
至此,我們已經成功地設置了兩個div元素的樣式。通過這種方式,我們可以很方便地為HTML元素添加各種樣式,從而實現各種效果。
上一篇css如何設置兩個間距
下一篇css如何設置右對齊