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;”在每个类(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;
 }