适合容器div宽度浮动的div儿童，并允许侧滚动只有css？

我想在容器div中动态加载内容的横向滚动布局。身体div中的孩子div左侧浮动，可以是任何宽度。适合容器div宽度浮动的div儿童，并允许侧滚动只有css？

<div id="container" style="overflow-y:hidden, overflow-x:scroll"> 
    <div style="float: left">Lots of images and text</div> 
    <div style="float: left">More images and text</div> 
    <div style="float: left">Even more</div> 
</div>

基本上，我需要这样的内部的div是并排侧，使这个fiddle工作，滚动左到右，并且可以有任意数量的人。容器格也是可调整大小的;]

是否有可能只用css来做到这一点？我必须使用JavaScript吗？

来源

2013-06-26 Tucker Connelly

喜欢这个？ http://stackoverflow.com/questions/6690302/a-wide-div-with-limited-width/6690373#6690373 – thirtydot

http://jsfiddle.net/zepva/1/

#simulating_body { 
    width: 98%; 
    border: 3px solid #222; 
} 

#middle { 
    overflow: auto; 
    white-space: nowrap; 
} 

.inner{ 
    display: inline-block; 

}

一些提示：你不能使用一个ID超过一次，那么，你的两个内部的div有#inner，那就没办法了。

你有正确的想法使用内联块，但你有错误的元素。

使用inline-block关于您想要并排排列的元素，然后在其父元素上使用white-space: nowrap;以确保它们在同一行上。

来源

2013-06-26 02:33:50 Kolby

啊啊天才！谢谢一堆！ –

浮点数和内嵌块在填充时会失败。可滚动内容（所有子项都作为父页内滚动的单个页面）无法计算宽度，因此大块仍保留在可见区域之外，其宽度等于子元素所有填充的总和。小提琴在http://stackoverflow.com/q/23976017/595488 – sergio

我怀疑你可以用浮漂做，但display: inline-block应该工作：

HTML

<div id="container"> 
    <div>Lots of images and text</div> 
    <div>More images and text</div> 
    <div>Even more</div> 
</div>

CSS

#container { 
    white-space: nowrap; 
    max-width: 100px; 
    overflow-x: auto; 
} 
div { 
    white-space: nowrap; 
    display: inline-block; 
}

这里有一个jsbin：http://jsbin.com/uguhiz/1/edit

来源

2013-06-26 02:35:37 uber5001

适合容器div宽度浮动的div儿童，并允许侧滚动只有css？

回答

相关问题