html - 浮遊要素の余白を増やす

Question

.containern 個の (left-blockおよびright-block) div があるということです。
left-block左にright-block浮かび、右に浮かびます。left-blockしかし、1 回目とright-block2 回目以降は余裕がありませんleft-block。right-block
デモは次のとおりです: JSBin

Answer 1

に加え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;
}

Answer 2

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

フローティング要素は要素になるため、注意が必要です。他の問題を引き起こすことなくマージンを維持できるように、inlineそれらを最初に定義することをお勧めします。inline-block

適用したコードは次のとおりです。

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