divを並べて並べる効率的な方法は？

Question

3、4、または5つのdivを並べて並べる最も良い方法は何ですか？それぞれの間に間隔を置いて離れている。

私はこれを試してみましたが、そこには非常に多くの異なる答えがあるようですが、ちょうどあまりにもユースケース依存（つまり2 divsまたは3 divsの場合） divの数？あなたの "非常に多くの異なった答え" で

div.container { display:table; border-spacing:{your-space}px; } 
div.container > div { display:table-cell; } 

： http://plugins.jquery.com/project/equalizeCols

Answer 1

をここに与えられたすべての答えは優れていると、彼らは効率的な方法です。しかし、私はあなたをより簡単にしようとしました。

HTML：

<div id="apnd"> 
    <div>One</div> 
    <div>Two</div> 
    <div>Three</div> 
    <div>Four</div> 
    <div>Five</div> 
    <div>Six</div> 
    <div>Seven</div> 
    <div>Nine</div> 
    <div>Ten</div> 
    <div>Eleven</div> 
</div> 

CSS：

#apnd div { 
     height: 100px; 
     width: 100px; 
     border: 1px solid red; 
     margin-left: 5px; 
     float: left; /*Here you can also use display: inline-block instead of float:left*/ 
     background: orange; 
} 

Answer 2

セット？

今日では、ブロック要素の水平行を作る最も信頼できる方法です。

CSS WGはhttp://www.terrainformatica.com/w3/flex-layout/flex-layout.htm :)

Answer 3

を：これを試してみてください

おかげ

Answer 4

はこのようなものがあります：私はこれを使用

div { 
float:left 
margin-left:20px; //or whatever you want 
} 

div:first-child { 
margin-left:0; 
} 

Answer 5

別のオプション受け入れるまで：http://jsfiddle.net/brandondurham/Tht3N/

<div id="row"> 
    <div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div> 
</div> 

#row { 
    white-space: nowrap; 
} 
#row > div { 
    background: lightblue; 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
} 
#row > div + div { 
    margin-left: 10px 
}