Question

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

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

这就是我想要的：在每一行上创建两个框。我不能在这里做到这一点，因为我也希望在两个盒子之间做出差距。

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

感谢您的建议。

Answer 1

您可以向text-align: justify;添加.addresses，然后移除margin-right上的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;
  }

CSS中两个框之间的边距

5 个答案: