避免div（s）包装

我想创建一个具有固定宽度（比如宽度：300px），其中包含div（比如宽度：80px）的div父容器。但是，当容器得到4个div（即80 * 4 = 320px> 300px）时，它会包装第四个div。我希望不会有div的包装，我们可以执行水平滚动，以便容器宽度保持300px，如果divs超出视野，我们可以水平滚动以查看所有div。避免div（s）包装

<html> 
<body> 
    <div id="parent" style="width:300px;overflow:scroll;"> 
    <div class="child" style="width:80px; float:left;">lorem</div> 
    <div class="child" style="width:80px; float:left;">ipsum</div> 
    <div class="child" style="width:80px; float:left;">dolore</div> 
    <div class="child" style="width:80px; float:left;">lorem</div> 
    </div> 
</body> 
</html>

来源

2011-03-16 Anees Haider

.child { 
    display: inline-block; 
} 

#parent { 
    white-space: nowrap; 
}

这里是例如：http://jsfiddle.net/qnpGm/

UPDATE：直列：在IE6/IE7这将仅在具有自然的显示元件的工作。感谢您的意见:)

来源

2011-03-16 09:25:45

感谢伊万，它的工作，也不得不删除 “浮动：左;”

lorem

ipsum

dolore

lorem

–

烨，正想。建议下一步：p 你可能要考虑设置子div到sp因为IE不喜欢在标签上使用inline-block，因为IE6和IE7不会像其他浏览器那样使用内联标签 – andyface

，您需要注意这一点。 –

尝试将white-space:nowrap;添加到#parent样式中。没有在你的代码上测试过这个，但是我在类似的情况下使用了这个，我需要扩展一个包含多个子div的div而没有为父级设置宽度。

来源

2011-03-16 09:20:53 andyface

什么都没有发生:( –

因此，“内联块”会出现关于crossbrowser-compactibility（IE 6）的问题，我想这是不可能的，没有一点额外的标记。

因此，让我们假设“父”是您的视口。然后，你需要一个容器，围绕“孩子”元素，与所有元素具有相同的宽度 - 在你的情况下为320px。您可以使用服务器端语言或JavaScript来计算。

<html> 
<body> 
    <div id="parent" style="width:300px;overflow:scroll;"> 
    <div id="view" style="width:320px;"> 
     <div class="child" style="width:80px; float:left;">lorem</div> 
     <div class="child" style="width:80px; float:left;">ipsum</div> 
     <div class="child" style="width:80px; float:left;">dolore</div> 
     <div class="child" style="width:80px; float:left;">lorem</div> 
    </div> 
    </div> 
</body> 
</html>

来源

2011-03-16 09:33:44 PenthousePauper

避免div（s）包装

回答

相关问题