19

div2つの異なるプロジェクトで、2つのを水平に並べて配置する2つの異なる方法を学びました。一方が他方よりも優れているのか、それとも個人的な好みの問題なのか、それとも偶然にしか機能していないのか。

方法1：

.container,
.div1,
.div2 {
  border: 1px solid red;
}

.div1,
.div2 {
  float: left;
}
<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div style="clear: both;"></div>
</div>

方法2：

.container,
.div1,
.div2 {
  border: 1px solid green;
}

.div1,
.div2 {
  display: inline-block;
}
<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
</div>

4

4 に答える 4

10

最初のものは、古いブラウザーでより広くサポートされていますが、float通常、いくつかの奇妙な動作につながります (悪くはありません。デザインを壊すものではなく、少し予期しないものです)。

inline-blockライフサイクルの後半でランダムなブラウザーをチェックすると、デザインに壊れたものを見つけるためだけにクランクアウトします。

float私は通常、 と のみに固執しfloatます。

編集

ほぼ10年後にこの回答を再検討すると、私の推奨事項は固執しflexbox、のみになりflexboxます。練習が必要な場合は、https://flexboxfroggy.com/を試してください。

于 2012-11-23T08:28:05.047 に答える
4

どちらも有効な CSS であり、偶然に機能することはありません。何が必要かによって異なります。

sを使用する場合floatは、(投稿されたコードのように) それらをクリアする必要があります。sを使用する場合inline-block、これは必要ありません。また、要素text-alignを揃えるためにを使用できますが、 はありません。プロパティを使用して、必要に応じてボックスを揃えることもできます。inline-blockfloat: middlevertical-align

他の人が言ったように、 にはいくつかの問題がありますinline-block。最も顕著なのは、古い IE がブロック要素で (あまり) サポートしていないことです ( のようなインライン要素ではうまく動作することに注意してください<span>)。次のハックでこれを回避できます。

.selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
于 2012-11-23T08:35:36.210 に答える
2

Float(最初の方法)を使用します。すべてのブラウザをサポートし、扱いやすいためです。詳細については、こちらのリンクをご覧ください

于 2012-11-23T08:32:55.787 に答える
1

2 番目の方法を使用しているDIV場合は、それをインライン要素に変換する場合に a を使用しても意味がありません。SPANタグを使用するだけです。

したがって、ブロック レベルの要素/タグを揃えようとしている場合は、最初の方法を使用してください。

于 2012-11-23T08:28:54.470 に答える