當(dāng)制作三列布局時(shí),我們經(jīng)常需要讓中間的列保持固定。這種布局可以在不同的網(wǎng)站和應(yīng)用程序中看到,包括電子商務(wù)網(wǎng)站和博客。
CSS中實(shí)現(xiàn)三列布局并讓中間列固定的最簡(jiǎn)單方法是使用浮動(dòng)。我們可以使用CSS屬性float:left或float:right來(lái)讓左側(cè)或右側(cè)的列浮動(dòng),而中間的列則不浮動(dòng):
.left-col { float: left; width: 25%; } .right-col { float: right; width: 25%; } .middle-col { margin-left: 25%; margin-right: 25%; }
我們先將左側(cè)和右側(cè)的列設(shè)置為float:left和float:right,然后將中間的列設(shè)置為margin-left:25%和margin-right:25%。這意味著中間列會(huì)保持固定,它的寬度將為50%, 兩側(cè)的列各占整個(gè)寬度的25%。
如果我們希望內(nèi)容可以在列中垂直居中,我們可以使用flexbox或grid。Flexbox可以輕松地使元素在容器中垂直居中:
.container { display: flex; justify-content: space-between; align-items: center; } .left-col, .middle-col, .right-col { flex: 1; }
我們首先將容器的display屬性設(shè)置為flex,然后使用justify-content屬性使列之間有空間,使用align-items屬性使元素垂直居中。最后,我們將所有列的flex屬性設(shè)置為1,使它們平均分配可用空間。
綜上所述,在CSS中實(shí)現(xiàn)三列中間固定的布局是相對(duì)簡(jiǎn)單的。我們只需要使用浮動(dòng)和margin或flexbox,就能輕松實(shí)現(xiàn)這個(gè)常見(jiàn)的布局。