我正在玩CSS元素的属性并编写了这段代码：
body {
font-family: "Helvetica";
}
.parent {
background-color: yellow;
overflow: auto;
padding-bottom: 20px;
display: inline-block;
}
.col {
height: 200px;
padding: 20px 10px;
float:left;
margin: 10px 10px;
}
.red {
background-color: red;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: #0000ff;
color: white;
}
p:hover {
background-color: #ffff00;
}
为什么当我运行结果并将屏幕调整到蓝色浮动清除到下一行的点时,父div的黄色轮廓不会调整大小以适应宽度？
如果这令人困惑,我道歉.这是我的意思的一个直观的例子：
https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0
尽管存在内联块,为什么还留下黄色空间？是因为浮动保留了那里的预留空间,即使它被清除到下一行？
的jsfiddle：
http://jsfiddle.net/ffxg9qq0/1/embedded/result/
谢谢！
解决方法
这个空间是浮动的原因：孩子们的左边
你需要编写@media查询,以便.parent调整
@media screen and (max-width: 400px){
.col{
float:none;
}
}
将以下小提琴调整为最大宽度400px
演示 – http://jsfiddle.net/ffxg9qq0/3/
body {
font-family: "Helvetica";
}
.parent {
background-color: yellow;
overflow: auto;
padding-bottom: 20px;
display: inline-block;
}
.col {
height: 200px;
padding: 20px 10px;
margin: 10px 10px;
float: left;
}
.red {
background-color: red;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: #0000ff;
color: white;
}
p:hover {
background-color: #ffff00;
}
@media screen and (max-width: 400px) {
.col {
float: none;
}
}
<div class='parent'>
<div class='col green'>
<p>I'm in a green float!</p>
</div>
<div class="col red">
<p>I'm in a red float!</p>
</div>
<div class="col blue">
<p>I'm in a blue float!</p>
</div>
</div>
