Question

我无法弄清楚这个基本问题。我基本上试图将紫色 div放在黄色 div旁边。这两个div包含在白色div中，而 white div包含在 blue div中。

如果我将黄色和紫色 div左移，白色 div将其固定宽度从960px更改为100％，并且< em> blue div无法看到。

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

＆＃13;

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

＆＃13;

<!-- Footer -->
<div id="footer-wrap">
<div id="footer-content-wrap">

<div id="footer-left"></div>

<div id="footer-right"></div>

</div>
</div>

</body>
</html>

＆＃13;

Answer 1

当你浮动你的footer-left和footer-right div时， white div的宽度为100％，因为它的960px等于< EM>页脚

如果我漂浮黄色和紫色div，则白色div会改变它固定宽度从960px到100％，无法看到蓝色div。

无法看到蓝色div ，因为您未清除浮动 - 使用overflow: hidden上的footer-content-wrap清除它。

见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以为div添加float:left属性。

请参阅此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>

固定的div宽度意外地变为100％

3 个答案: