0

可以说我有这个

<div class="sectionContainer">
    <div class="itemsContainer">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</div>

的CSS：

.itemsContainer 
{
 /* width:3000px works, however this is what I want to avoid saying explicitly.*/
}

.sectionContainer
{
width: 1000px;
overflow: auto; 
}

.items
{
width: 1000px;     
float: left;     
}

sectionContainer 有一些固定的宽度。

这些项目有一些固定的宽度。

items 容器没有设置宽度；它将缩放到其内容的大小。项目容器的溢出设置为隐藏，以便可以滚动浏览 div 中的项目。div 中的项目是水平显示的IE 它们是并排的，我目前正在使用浮动来执行此操作。

我怎样才能只用 CSS 做到这一点？可能吗？我不是马上寻找 JavaScript 解决方案，但如果需要可以求助。

更具体地说，如果我将 itemsContainer 的宽度指定为 3000，这将起作用。但我猜测，由于它是其父 div 的子项，因此其宽度的大小为 1000。我不想显式设置itemsContainer 的大小，因为这应该基于项目的数量。如果我添加更多项目，我希望 itemsContainer 更改其宽度以包含所有这些项目，而无需更改 CSS。

谢谢！

4

1 回答 1

0

CSS 不可能猜测你想要发生的事情——这意味着它想要向下级联元素而不是水平级联，这就是你想要的。

http://jsfiddle.net/9NHFa/

将 itemsContainer 宽度设置为元素数量的 100% X。

.itemsContainer 
{
width:300%; /* since you have 3 elements
}
于 2012-10-03T16:29:08.440 回答