CSS是前端開發(fā)中不可或缺的技術(shù),其中自動(dòng)換行是很多開發(fā)者經(jīng)常要用到的功能,特別是在制作網(wǎng)頁布局時(shí),經(jīng)常需要使用自動(dòng)換行的DIV。下面我們就來通過代碼演示這一功能。
<div class="wrap"> <div class="box">這是第一個(gè)div</div> <div class="box">這是第二個(gè)div</div> <div class="box">這是第三個(gè)div</div> <div class="box">這是第四個(gè)div</div> <div class="box">這是第五個(gè)div</div> <div class="box">這是第六個(gè)div</div> <div class="box">這是第七個(gè)div</div> <div class="box">這是第八個(gè)div</div> </div> /* CSS */ .wrap { width: 500px; margin: 0 auto; } .box { width: 200px; height: 100px; background: #ccc; margin: 10px; float: left; }
上面是我們使用CSS實(shí)現(xiàn)自動(dòng)換行的方法。具體實(shí)現(xiàn)方法是使用float屬性讓每個(gè)DIV都向左浮動(dòng)起來,然后父級(jí)容器會(huì)根據(jù)子元素的大小自適應(yīng)寬度,這樣就實(shí)現(xiàn)了我們想要的自動(dòng)換行的效果。如果瀏覽器窗口大小發(fā)生變化,也可以自適應(yīng)寬度。
如果我們想要實(shí)現(xiàn)DIV居中的效果,可以給父級(jí)容器添加text-align:center屬性,這樣子元素就會(huì)在父容器中水平居中了。如果想要垂直居中,則可以使用display:table-cell;vertical-align: middle;屬性來實(shí)現(xiàn)。
總之,CSS自動(dòng)換行DIV是前端開發(fā)中非常常用的功能,使用float屬性可以很方便地實(shí)現(xiàn),使網(wǎng)頁布局更加美觀。