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には一定の幅があります。

アイテムには一定の幅があります。

アイテムコンテナには設定された幅がありません。内容のサイズに合わせて拡大縮小されます。アイテムコンテナのオーバーフローは非表示に設定されているため、div内のアイテムをスクロールできます。div内のアイテムは、横に並べて表示されます。現在、フロートを使用してこれを行っています。

CSSのみでこれを行うにはどうすればよいですか？出来ますか？私はすぐにJavaScriptソリューションを探していませんが、必要に応じてそれに頼ることができます。

具体的には、itemsContainerの幅を3000に指定すると機能します。ただし、親divの子であるため、幅は1000になります。明示的に設定したくないこれはアイテムの数に基づく必要があるため、itemsContainerのサイズ。さらにアイテムを追加する場合は、CSSを変更せずに、itemsContainerの幅を変更してそれらすべてのアイテムを含めるようにします。

ありがとう！

4

1 に答える 1

0

CSSが何をしたいのかを推測することはできません。つまり、CSSは、要素を水平方向ではなく下向きにカスケードしたいということです。

http://jsfiddle.net/9NHFa/

itemsContainerの幅を要素の数の100％Xに設定します。

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