CSS是我們前端開(kāi)發(fā)中不可避免的一部分。今天我們就來(lái)學(xué)習(xí)一下如何用CSS來(lái)擺放三個(gè)div。
首先，我們需要新建一個(gè)HTML文件，然后在body中添加三個(gè)div。
<body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
接下來(lái)，我們需要使用CSS來(lái)定義每一個(gè)div的樣式。我們將分別為每一個(gè)div添加不同的背景色，并將它們?nèi)扛?dòng)到左側(cè)。
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}在上述代碼中，我們使用了float屬性來(lái)讓每個(gè)div向左浮動(dòng)，并使用width和height屬性定義了div的大小。
在使用CSS樣式定義好我們?nèi)齻€(gè)div的大小和樣式后，在瀏覽器中預(yù)覽效果，你會(huì)看到三個(gè)顏色各異的方塊排列在頁(yè)面左側(cè)。這就是我們今天所學(xué)的如何使用CSS來(lái)擺放三個(gè)div的方法。