Question

我正在玩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/

谢谢！

Answer 1

该空间是由于孩子的float:left引起的

您需要撰写@media查询，以便.parent调整

@media screen and (max-width: 400px){
    .col{
        float:none;
    }    
}

将以下小提琴调整为max-width 400px

演示 - http://jsfiddle.net/ffxg9qq0/3/

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

为什么浮子在逃到下一行时会留下“幽灵”空间？

1 个答案: