DIV不具有溢出调整宽度内容的另一个DIV中：汽车

我有以下的HTML代码：DIV不具有溢出调整宽度内容的另一个DIV中：汽车

<div class="main"> 
    <div class="container"> 
     <div class="contents"> 
      Some funny stuff in here 
     </div> 
    </div> 
</div>

用下面的CSS：

.main { 
    overflow: auto; 
    width: 200px; 
} 
.container { 
    border: 1px solid black; 
} 
.contents { 
    width: 300px; 
}

这是此页（见它在http://jsfiddle.net/C7RDh/7/）：

main DIV是200像素宽，与溢出：汽车（即滚动内容，如果更广泛的塔200px）。
因此，由于contents div宽度为300px，因此它会水平滚动。
所以，我希望container div也是300px（因为它里面的元素是300px宽），但它不是！宽200px。

怎么回事？我希望它与内容一样宽（300px），我该如何实现？

来源

2013-01-25 German Latorre

你只需要让你的容器浮动

.container { 
    border: 1px solid black; 
    float: left; 
}

浮动会自动调整外的div内部div宽度。

来源

2013-01-25 08:54:55 zdesam

它实际上效果很好，但是，为什么'container' div没有调整自己而没有'float：left'风格？ –

内部div将外部div的所有宽度都设为无浮动，这意味着您的外部div（在这种情况下，.main为200px，因此您的内部div .container会自动获取所有200px），无论您的.contents div宽度是多少，我建议使用 – zdesam

你使用这个答案而不是其他答案。 –

你需要稍微调整你的CSS。这将工作：

.main { 
    overflow: auto; 
    width: 200px; 
    float: left; 
} 
.container { 
    border: 1px solid black; 
    float: left; 
} 

.contents { 
    width: 300px; 
    float: left; 
}

来源

2013-01-25 08:40:48

只是好奇，你能解释为什么这将工作？我会和@ antur123在同一条船上，因为我不是css的主人。 – John

我同意@约翰，为什么这项工作和“预期”（从我的角度来看）风格不起作用？ –

很好解释：http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ 享受。 –

-1

其实你应该在容器中的CSS不是主要的CSS添加overflow: auto

来源

2013-01-25 08:47:26

这不是我的情况，我问这是因为我有一个情景，我必须处理类似的情况，没有机会做你建议 –

DIV不具有溢出调整宽度内容的另一个DIV中：汽车

回答

相关问题