一、問題描述
在做瀑布流的時候設定給div設定float：left 發現無效。原代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
}
.box{
padding-top: 10px;
padding-left: 10px;
box-sizing: border-box;
margin: 0 50px auto;
width: 100px;
}
.board>img{
width: 200px;
}
.board{
float: left;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-left: 15px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="board"><img src="images/img01.jpg" alt=""></div>
<div class="board"><img src="images/img02.jpg" alt=""></div>
<div class="board"><img src="images/img03.jpg" alt=""></div>
<div class="board"><img src="images/img04.jpg" alt=""></div>
<div class="board"><img src="images/img05.jpg" alt=""></div>
<div class="board"><img src="images/img06.jpg" alt=""></div>
<div class="board"><img src="images/img07.jpg" alt=""></div>
<div class="board"><img src="images/img08.jpg" alt=""></div>
<div class="board"><img src="images/img01.jpg" alt=""></div>
<div class="board"><img src="images/img02.jpg" alt=""></div>
<div class="board"><img src="images/img03.jpg" alt=""></div>
<div class="board"><img src="images/img04.jpg" alt=""></div>
<div class="board"><img src="images/img05.jpg" alt=""></div>
<div class="board"><img src="images/img06.jpg" alt=""></div>
<div class="board"><img src="images/img07.jpg" alt=""></div>
<div class="board"><img src="images/img08.jpg" alt=""></div>
</div>
</div>
</body>
</html>效果：
二、解決方案
其實並不是設定無效，而是給父盒子 .box 設置邊框小於.board的寬度，導致無法在同一行，由於原來就是上下佈局，所以沒看出來差別以爲是設定無效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
}
.box{
padding-top: 10px;
padding-left: 10px;
box-sizing: border-box;
margin: 0 50px auto;
}
.board>img{
width: 200px;
}
.board{
float: left;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-left: 15px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="board"><img src="images/img01.jpg" alt=""></div>
<div class="board"><img src="images/img02.jpg" alt=""></div>
<div class="board"><img src="images/img03.jpg" alt=""></div>
<div class="board"><img src="images/img04.jpg" alt=""></div>
<div class="board"><img src="images/img05.jpg" alt=""></div>
<div class="board"><img src="images/img06.jpg" alt=""></div>
<div class="board"><img src="images/img07.jpg" alt=""></div>
<div class="board"><img src="images/img08.jpg" alt=""></div>
<div class="board"><img src="images/img01.jpg" alt=""></div>
<div class="board"><img src="images/img02.jpg" alt=""></div>
<div class="board"><img src="images/img03.jpg" alt=""></div>
<div class="board"><img src="images/img04.jpg" alt=""></div>
<div class="board"><img src="images/img05.jpg" alt=""></div>
<div class="board"><img src="images/img06.jpg" alt=""></div>
<div class="board"><img src="images/img07.jpg" alt=""></div>
<div class="board"><img src="images/img08.jpg" alt=""></div>
</div>
</div>
</body>
</html>去掉對.box寬度設定後：
被自己蠢哭๑乛◡乛๑