display:inline-block的使用示例
在實(shí)習(xí)中做專題時(shí)，遇到的一個(gè)問(wèn)題：建立一個(gè)寬度很長(zhǎng)的一個(gè)頁(yè)面，里面包含許多列?；蛟S許多人認(rèn)為直接設(shè)置float：left；不就行了 但是這個(gè)有一個(gè)問(wèn)題，你必須把外面的div的寬度設(shè)置的很長(zhǎng)已滿足大于所有子div的寬度，而實(shí)際中由于子頁(yè)面中個(gè)數(shù)不定，因此外面的div塊的寬度不能確定，若是外面的div塊的寬度不夠 就會(huì)導(dǎo)致部分子div塊移動(dòng)到下面的一行，這不是我們所要的就比如下面的代碼 復(fù)制代碼 代碼如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <title></title> <link rel="stylesheet" href="style.css"> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 500px; height: 600px; background: #ccc; border: 1px solid red; } .list{ width: 150px; height: 300px; background: blue; float: left; border: 1px solid green; } </style> <body> <div class="box"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> </body> </html> 可以 明顯看到 后面的兩個(gè)被擠到了下面的一行； 這時(shí)候可以使用display：inline-block 并將父級(jí)設(shè)置：white-spac：nowrap； 不夠此時(shí)子div塊之間會(huì)有一段空白 可以在父級(jí)中添加font-size:0; 即得到下面的圖形 |
|
|
