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

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

Answer 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

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

Answer 4

使用CSS属性：

display: inline-block

所有.box个班级

Answer 5

您可以使用此简单代码将三个表并排放置

   <!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>

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

5 个答案: