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 ，但这很混乱，而且让它们看起来与它们之间足够的排水沟同样对齐很麻烦。创建这个的最佳方法是什么？

score 4 · Accepted Answer

您必须输入“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;
 }

score 2 · Accepted Answer

.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

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

score 1 · Accepted Answer

1

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

于 2013-04-10T00:58:33.780 回答

score 0 · Accepted Answer

0

使用 CSS 属性：

display: inline-block

在所有 .box班级

于 2013-04-10T01:04:01.980 回答

score 0 · Accepted Answer

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

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

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

5 回答 5

Related

Reference