适应容器div宽度浮动div儿童和允许侧滚动只有css？

问题描述

我试图做一个侧滚动布局，内容动态加载到容器div。

I'm trying to make a side-scrolling layout with content that's loaded dynamically in the container div. The children divs in the body div are floated left and can be any width.

<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是并排，从左到右滚动，可以有任何数量的。容器div也是可调整大小的;]

I basically need to make this fiddle work so the inner divs are side-by-side, scrolling left-to-right, and there can be any number of them. The container div is also resizable ;]

是否可以只使用css？我必须使用javascript吗？

Is it possible to do this with only css? Do I have to use javascript?

推荐答案

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

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

.inner{
    display: inline-block;

}

提示：您不能多次使用ID ，所以你在两个内部div上有 #inner ，这将不起作用。

Some tips: You can not use an ID more than once, so where you had #inner on the two inner divs, that wouldn't work.

使用inline-block，使用 inline-block 元素，然后在其父元素上使用 white-space：nowrap; ，以确保它们在同一行上。

Use inline-block on the elements you want to be side by side, and then use white-space: nowrap; on their parent element to make sure they on the same line.

这篇关于适应容器div宽度浮动div儿童和允许侧滚动只有css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！