2009-07-20 4 views
2

は私が均等に沿って分布する「b」を持っているしたいと思います「」このような:divをコンテナの幅に沿って配布するにはどうすればいいですか?

[1  2   3  4] 

十分なスペースがない場合は、「」ブロックは次の行に及ぶこといいだろう。ここにhtml構造体がありますが、それは石で固定されていないので変更できます。

<html> 
    <head> 
     <style> 
      .a { width: 100%; border: 1px solid; float: left; } 
      .b { width: 100px; border: 1px solid red; float: left;} 
     </style> 
    </head> 
    <body> 
     <div class'a'> 
      <div class='b'>1</div> 
      <div class='b'>2</div> 
      <div class='b'>3</div> 
      <div class='b'>4</div> 
     </div> 
    </body> 
</html> 
+1

ないんだけどここではかなり良い答えと非常によく似た質問です:http://stackoverflow.com/questions/674045/distribute-elementsは-evenly-using-css – peirix

+0

あなたのリンクから見つけた http://css-tricks.com/equidistant-objects-with-css/ これはソリューションに最も近いものです –

答えて

0

アム

[1 2 3 4] 

いますが、任意の数を持っています固定幅の内側アイテム、外側コンテナの幅は任意です。

私はjavascriptを掘り下げるずにいることを達成する方法があります実際に確認してください:(

0

私はあなたがjQueryのを使用して、このexampleに記載されているこれらのようなスマートな列を探していると思います。 live demoもお試しください。

0

あなたは何を言っているのですか? .aの幅が400px未満の場合、折り返し効果が正しく機能しませんか?この場合、.aの高さが4番目の.b divの底を満たしていないと仮定しています。 .aの中に.bの後に<br clear="all" />を追加する必要があります。

0

おそらく最も良いことは、.bインラインブロックを作り、その幅を100%にすることです。基本的に(隠された「B」の境界線で)これを与えること

[[1 ][ 2 ][ 3 ][ 4]] 

:あなたはこれを達成したい考えで正しい

関連する問題