html - CSS中两个框之间的边距

Question

首先，我是前端开发的新手。我只是想听听专业人士对我的问题可能的“专业”解决方案。

现在，首先看看这个小提琴：http: //jsfiddle.net/SB7yR/

这就是我想要的：在每一行上创建两个框。我不能在这里这样做，因为我也想在两个框之间留出边距。

我有针对这种情况的解决方案，例如创建一个像“last”这样的类并给它，margin-right: 0;然后为每一行应用最后一个框。但我不想那样做。听起来..嗯..一个业余的解决方案。

感谢您的建议。

Answer 1

您可以添加text-align: justify;和.addresses删除margin-righton address_box。

.addresses {
  margin-top: 30px;
  text-align: justify;
}

此外，您应该使用类.addresses #address-box而不是 ID。ID 在页面上应该是唯一的，因此只允许一个元素具有特定的 ID。改用这个.addresses .address-box。

Answer 2

试试下面的代码： -

.addresses #address-box {
    height: 123px;
    width: 298px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    float:left;
    margin-right: 20px;
  }
#address-box:nth-child(2n) {
    margin-right:0;
  }

Answer 3

我的建议是为所有盒子创建一个类（假设每个盒子的大小相同），然后将所有盒子浮动。然后，您将使宽度（实际物理大小或百分比）小于包含 div 的宽度。这将完成您在每行中有两个框。希望这可以帮助。

.box{ float:left; width:48%; margin-right:5px; } 

类似的东西。试验保证金适量。

Answer 4

为了跨浏览器兼容性，额外的 html 元素怎么样：

http://jsfiddle.net/SB7yR/8/

html:

<div id="addresses-wrap">
    <div class="addresses">
        <div class="overflow">
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
        </div>
    </div>
</div>

CSS：

#addresses-wrap {
    width: 620px;
    height: auto;
    border:1px solid green;
    overflow:hidden;
}
.addresses {
    width:100%;
    float:left;
    margin-top: 30px;
}
.addresses .overflow {
    width:650px;
    overflow:hidden;
}
.addresses #address-box {
    height: 123px;
    width: 298px;
    border:1px solid #000;
    float:left;
    margin:0 20px 20px 0;
}

Answer 5

您需要使用浮点数来完成这项工作。尝试用.addresses #address-box以下内容替换您的定义：

.addresses #address-box {
    height: 123px;
    width: 288px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    float: left;
  }