javascript - HTML divを構造のような行に並べるにはどうすればよいですか？

Question

いくつかのdivを水平方向の行構造に揃えようとしています。子divcontainerを持つdivがあり、これらの子divは同じ行にある必要があります。これらのような多くのコンテナdivが存在する可能性があり、IDは異なりますが、クラス名は同じです。

どうやってやるの？これが私が試したjsFiddleです：http：//jsfiddle.net/unix_user/VSd6Y/6/。

Answer 1

を使用しdisplay:inline-blockます。このようにして、あなたのdiv意志は互いに隣り合って積み重ねられ、要素に共通の幅やその他の属性を指定することができます.block

更新された fiddleを確認してください。divでスタイルさcontainerれた が別々の行にあることがわかりますが、子divは互いに隣り合って積み上げられています。

Answer 2

次のような .class を使用することをお勧めします。

.repeating{width:400px; height:100px;margin:0px;padding:0px;}    
.repeatMe{width:90px; height:100px; padding:0px 5px; float:left;}



<div id="repeating">
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
</div>

Answer 3

UL LIこれを構造と考えてください。float:left;要素またはdisplay:inline-block;新しいブラウザーのいずれかを使用できます。