HTML中可以通過div元素來創(chuàng)建盒子,我們可以通過CSS來設(shè)置樣式來實現(xiàn)三個并列盒子的布局。下面我們來看看怎么寫:
盒子1
這里是盒子1的內(nèi)容
盒子2
這里是盒子2的內(nèi)容
盒子3
這里是盒子3的內(nèi)容
如上所述,我們使用了三個div元素分別創(chuàng)建了三個盒子,并使用container、box-1、box-2、box-3這四個類名來設(shè)置樣式。下面是對應(yīng)的CSS:
.container { display: flex; justify-content: space-between; } .box-1, .box-2, .box-3 { width: 30%; background-color: #ccc; padding: 20px; } .box-1 h2, .box-2 h2, .box-3 h2 { margin-top: 0; }
在CSS中我們使用了flex布局和space-between來實現(xiàn)三個盒子的并列布局。同時我們設(shè)置了盒子的寬度和背景顏色,并且給所有盒子的標題設(shè)置了上邊距,避免與容器的邊框重疊。