固定 div 宽度意外更改为 100%

Question

我搞不懂这个基本问题。我基本上是在尝试将 紫色 div 放在 黄色 div 旁边。这2个div被白色div包裹着，白色div被蓝色[=34包裹着=] div.

如果我将 黄色 和 紫色 div 向左浮动，白色 div将其固定宽度由960px改为100%，blue div看不到

如何解决这个问题？我已经尝试 clear:both 但无济于事。

/* Footer */
#footer-wrap{
 width:auto;
 height:auto;
 background:#039;
}
#footer-content-wrap{
 width:960px;
 height:auto;
 background:#EDF5F7;
 margin:0 auto;
}
#footer-left{
 width:500px;
 height:200px;
 background:#CC3;
}
#footer-right{
 width:460px;
 height:200px;
 background:#96F;
}

<!-- Footer -->
<div id="footer-wrap">
<div id="footer-content-wrap">

<div id="footer-left"></div>

<div id="footer-right"></div>

</div>
</div>

</body>
</html>

Answer 1

您可以将 float:left 属性 添加到您的 div。

看到这个pen。

CSS :

#footer-wrap {
    width: auto;
    height: auto;
    background: #039;
}
#footer-content-wrap {
    width: 960px;
    height: auto;
    background: #EDF5F7;
    margin: 0 auto;
}
#footer-left {
    width: 500px;
    height: 200px;
    background: #CC3;
    float: left;
}
#footer-right {
    width: 460px;
    height: 200px;
    background: #96F;
    float: left;
}

HTML :

<div id="footer-wrap">
  <div id="footer-content-wrap">    
    <div id="footer-left"></div>    
    <div id="footer-right"></div>    
  </div>
</div>

Answer 2

当您 浮动 您的 footer-left 和 footer-right div 时，白色 div 的宽度为 100%，因为它的 960px 等于 footers.

的总和

If I float the yellow and purple divs left, the white div changes its fixed width from 960px to 100%, and the blue div cannot be seen.

无法看到 blue div 因为你 没有清除浮动 - 用 [=14 清除它=] 在 footer-content-wrap.

参见下面的演示：

/* Footer */

#footer-wrap {
  width: auto;
  height: auto;
  background: #039;
}
#footer-content-wrap {
  width: 960px;
  height: auto;
  background: #EDF5F7;
  margin: 0 auto;
  overflow: hidden;
}
#footer-left {
  float: left;
  width: 500px;
  height: 200px;
  background: #CC3;
}
#footer-right {
  float: left;
  width: 460px;
  height: 200px;
  background: #96F;
}

<div id="footer-wrap">
  <div id="footer-content-wrap">
    <div id="footer-left"></div>
    <div id="footer-right"></div>
  </div>
</div>

Answer 3

你只需要将 overflow: auto; 添加到两个容器然后浮动你的元素，问题是当你浮动对象时容器会失去高度，你可以在这里阅读更多：why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Here is a fiddle 用你的代码和溢出的修复，我在容器中添加了一个额外的填充，这样你就可以检查结果，如果你删除填充，它仍然看起来像它们消失了，我也把白色 div 变成了红色让结果更明显。