html - 增加浮动元素的边距

Question

我有一个.container有n个（left-block和right-block）div的。
left-block向左right-block浮动和向右浮动。但是我在第一次和第二次之后没有得到保证金left-block，right-block这left-block是right-block
一个演示：JSBin

Answer 1

http://jsbin.com/ayiziNa/7/

您必须小心浮动元素，因为它们会成为inline元素 - 您可能希望将它们定义为inline-block第一个，以便它们能够保持边距而不会引起其他问题

这是我应用的代码：

.container > div {
  display: inline-block;
  margin-top: 20px;
}

Answer 2

添加margin-top到.left-block以及.right-block

演示

.left-block {
  float:left;
  border:solid #CCC 1px;
  width:350px;
  height:125px;
  background:transparent;
  clear: right;
  margin-top: 10px;
  //position:relative;
}

.right-block {
  float:right;
  border:solid #CCC 1px;
  width:350px;
  height:125px;
  background:transparent;
  clear:right;
  //position:relative;
  margin-top: 10px;
}

PS删除<br />标签，它们不是必需的。

---

上面的内容也会添加10px margin到顶部框，为了摆脱它，请使用下面的选择器。

.container > div:nth-of-type(1) {
  margin-top: 0;
}

.container > div:nth-of-type(2) {
  margin-top: 0;
}