2012-03-30 17 views
0

私の問題は説明するのが少し難しいです。私はdivが伸びるようにしたいので、浮かれた子供のすべてが同じ行にとどまります。問題は、コンテナの親が固定幅を持ち、オーバーフローが隠されていることです。固定幅とオーバーフローの親を持つ子divの自動幅:hidden

div.thumbが同じ行にとどまるようにdiv.container stretch(私の例では1100pxにする必要があります)というアイデアがあります。ここで

はJSFiddle上の例である:http://jsfiddle.net/TdHYg/3/

<div class ="viewport"> 
<div class="container"> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
</div> 

.viewport { 
border:1px black solid; 
overflow:hidden; 
width:400px; 
} 

.container { 
/* width:1100px*/ 
} 

.thumb{ 
background-color:lightgray; 
margin:5px; 
width:100px; 
height:100px;  
float:left; 
} 

答えて

0

http://jsfiddle.net/f2WeB/はあなたの要件を完全に満たしていますか?さあ、願ってみましょう!表示:インラインブロックはSafari 2の上、Opera 9の上、IE8の上、Firefox 3の上からサポートされています。

+0

はい!どうもありがとう。とにかく、私はIE7のサポートを停止する - Googleはしたので。 – gthibert

1

thumbsの周りに別のコンテナを追加します。

http://jsfiddle.net/TdHYg/4/

+0

div.thumbsの子が動的にJavascriptで変更されるため、div.containerの幅を指定したくないのですが...もちろんJSでコンテナの幅を計算することもできます100%CSSソリューション。 – gthibert

0

あなたは、周囲でザンダーのdiv要素を保存することができます容器浮動小数点数:http://jsfiddle.net/TdHYg/5/で浮動小数点数です。これにより、「ほぼすべてを浮かべる」ことができます。しかし、清算のような他の方法がある:http://jsfiddle.net/TdHYg/7/

またはhttp://jsfiddle.net/TdHYg/6/のようなものが必要なのでしょうか?

+0

div.thumbsの子が動的にJavascriptで変更されるため、div.containerの幅を指定したくないのですが...もちろんJSでコンテナの幅を計算できますが、100 %CSSソリューション。 – gthibert

関連する問題