html - 3 つの同じサイズのボックスを並べて作成するにはどうすればよいですか?

Question

次の仕様のコンテナがあるとします。

 .container {
 width: 960px;
 margin: 0 auto;
 height: 500px;
 }

真ん中に、次の仕様で水平方向に並べて配置された 3 つのボックスを追加したいと思います。

 .box1 {
 background-color: #000;
 width: 300px;
 height: 200px;
 }
 .box2 {
 background-color: #999;
 width: 300px;
 height: 200px;
 }
 .box3 {
 background-color: #333;
 width: 300px;
 height: 200px;
 }

それぞれにmargin-topとmargin-leftを使用してみましたが、それは面倒で、それらの間に十分なガターがあり、それらが均等に見えるようにするのは面倒でした. これを作成する最良の方法は何ですか?

Answer 1

「float:left;」と入力する必要があります。各クラスで。

 .container {
 float:left;
 width: 960px;
 margin: 0 auto;
 height: 500px;
 }

.box1 {
 float:left;
 background-color: #000;
 width: 300px;
 height: 200px;
 }
 .box2 {
 float:left;
 background-color: #999;
 width: 300px;
 height: 200px;
 }
 .box3 {
 float:left;
 background-color: #333;
 width: 300px;
 height: 200px;
 }

Answer 2

.container { width: 960px; margin: 0 auto; height: 500px; }
.container [class*='box'] { width:300px; height:200px; float: left; margin-right: 30px; }
.container .box1 { background-color: #000; }
.container .box2 { background-color: #999; }
.container .box3 { background-color: #333; margin-right: 0; }

http://jsfiddle.net/DRYBH/#fork

この最小コードを試すこともできます

Answer 3

.boxX 項目ごとに追加display: inlineします。これにより、問題が解決されます。

Answer 4

CSS プロパティを使用します。

display: inline-block 

すべての .boxクラスで