HTML – 为什么浮标在逃到下一行时会留下“幻影”空间？

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

HTML – 为什么浮标在逃到下一行时会留下“幻影”空间？

解决方法

猜你在找的HTML相关文章