Question

让我说我有这个

<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容器的溢出设置为hidden，以便可以滚动div中的项目。 div中的项目是水平显示的 IE它们是并排的，我现在正在使用浮点数。

我怎样才能使用CSS？可能吗？我不是马上寻找JavaScript解决方案，但如果需要可以采用它。

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

谢谢！

Answer 1

CSS无法猜测你想要发生什么 - 这意味着它想要向下级联元素而不是水平元素，这就是你想要的。

http://jsfiddle.net/9NHFa/

将itemsContainer宽度设置为100％X元素数。

.itemsContainer 
{
width:300%; /* since you have 3 elements
}

Div宽度自动调整到其内容的宽度，在具有设定宽度的div中？

1 个答案: