0

オレンジ色のコンテナーに次のルールを使用しながら、設定した CSS 2 列レイアウトの図をキャプチャしました。

.embedded_post{
    float: left;
    width: 46%;
    margin-right: 20px;
    padding: 10px;
    display: inline-block;
}

ご覧のとおり、右の列の 2 番目のオレンジ色のコンテナーが、左の列の 2 番目のオレンジ色のコンテナーが左上のボックスに浮き上がるのを妨げています。

float:leftこれは、ブロック レベルのフローで要素を自動的に許可するため、明らかに発生します。

左の列の 2 番目のボックスを最初のボックスの下に配置するにはどうすればよいですか?

4

3 に答える 3

0

あなたは自分でそれに答えました、いくつかのオプションがあります：

  1. divインラインレベルのフローで要素を付与する、つまり指定するdisplay: inline（非推奨）ことで、自分をだまします。
  2. よりセマンティックになるようにマークアップを更新し、目的の結果に一致するようにレイアウトを変更します。たとえば、divsをspansに置き換えます（推奨）。
于 2012-06-10T16:53:12.960 に答える
0

左側の 2 番目の div は、残りの div よりも幅が狭くなっています。これが関係している可能性があります。また、あなたの（望ましい）構造との組み合わせは、margin-right私が行う方法ではありません。実際、margin-rightdiv の親 div によっては、embedded_post構造が台無しになり、配置の問題が発生する可能性があります。

試してみるとうまくいきます。

ps Firefox では、パディングが div の幅/高さに追加されますが、これは他のブラウザーでは発生しないことに注意してください。

于 2012-06-18T12:55:43.660 に答える
0

右側の列のフローティングが左側のフローティングに影響しないように、列を別の div のペアでラップできますか?

<div id='left_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

<div id='right_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

CSS:

#left_column, #right_column {
  float:left;
}
于 2012-06-10T17:08:46.417 に答える