如何并排创建3个相同大小的盒子？

Let's say I have a container with with the following specs:

假设我有一个带有以下规格的容器:

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

Now in the middle I would like to add the 3 boxes aligned next to each other horizontally with the following specs:

现在在中间我想添加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;
 }

I tried using margin-top and margin-left on each but that was messy and it was a hassle getting them to look equally aligned with enough gutter between them. What's the best way to create this?

我尝试在每个上使用margin-top和margin-left,但这很麻烦,让它们看起来与它们之间足够的排水沟看起来一样麻烦。创建这个的最佳方法是什么?

5 个解决方案

#1

You have to put "float:left;" on each class.

你必须把“浮动:左;”在每节课上。

 .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;
 }

#2

For each of the .boxX items, add display: inline - this will fix the problem for you.

对于每个.boxX项目,添加display:inline - 这将为您解决问题。

#3

.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

you can also try this minimum code

您也可以尝试这个最小代码

#4

Use the CSS property :

使用CSS属性:

display: inline-block

in all .box classes

在所有.box类中

#5

you can use this simple code to put three tables side by side

你可以使用这个简单的代码并排放置三个表

   <!DOCTYPE html>
      <html>
      <head>
    <style> 
    #example1 {
box-sizing: content-box;    
width: 300px;
height: 100px;
padding: 30px;    
border: 10px solid blue;
                    }


       }
      </style>
    </head>
     <body>

       <table><tr><td>
       <div id="example1"></div></td>
              <td><div id="example1"></div> </td>
         <td><div id="example1"></div> </td>

    </tr></table>


   </body>
        </html>

#1