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;
即得到下面的圖形
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
