display:inline-block的使用示例
在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置float：left；不就行了 但是这个有一个问题，你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度，而实际中由于子页面中个数不定，因此外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，这不是我们所要的就比如下面的代码 复制代码 代码如下:<!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> 可以 明显看到 后面的两个被挤到了下面的一行； 这时候可以使用display：inline-block 并将父级设置：white-spac：nowrap； 不够此时子div块之间会有一段空白 可以在父级中添加font-size:0; 即得到下面的图形 |
|
|
