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

时间:2017-01-04 15:49:32

标签: html css css-float

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

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

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

&#13;
&#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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

当你浮动你的footer-leftfooter-right div时, white div的宽度为100%,因为它的960px等于< EM>页脚

  

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

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

见下面的演示:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

答案 2 :(得分:0)

您可以为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>
相关问题