8

ライン上にある必要がある一連のブロック要素を処理する最も一般的な方法は何ですか (たとえば、JavaScript で幅を変更できる必要がある場合)? float:left をそれぞれに適用することと、ポジショニングを使用して配置することの長所と短所は何ですか?

4

5 に答える 5

10

古いブラウザー (私は IE6 を見ています) にあまり関心がないのであれば、ここでの最善の方法は、

display:inline-block;

基本的には前後をクリアせずにボックスモデル要素を作成するので、そのまま線に残ります。最新のブラウザはすべて、それを適切に解釈します。

于 2008-11-21T22:56:31.290 に答える
4

フローティングが私の選択ですが、それは実際に何を達成したいかによって異なります。より具体的な例を提供できれば、何を、なぜ使用すべきかについて明確な理由を示すことができます。ただし、ここに私が遭遇した長所と短所の簡単なセットがあります（ポジショニングとは、絶対的なポジショニングを意味すると想定しています）：

ポジショニングの長所:

  • 相対位置としてマークされた次の先祖に関連する非常に正確な位置付け - 優れた柔軟性を可能にします
  • 要素を DOM 内とは視覚的に異なる順序にすることができます

ポジショニングの短所:

  • 配置された要素がドキュメント フロー内になくなるため、また必要な精度レベルのために、他の要素と整列するのが難しくなります。
  • 他の要素は絶対配置された要素を無視します。つまり、配置された要素の最小サイズと最大サイズを考慮しない限り、オーバーラップする可能性があります。
  • 列に絶対配置を使用している場合、フッターの実装が難しくなります。

フロートの長所:

  • シンプルで高度なレイアウトを構築するのは本当に簡単です
  • フッター問題なし
  • 精度を気にする必要はありません。ブラウザが処理してくれます
  • 親コンテナが伸びる

フロートの短所:

  • フロート レイアウトの経験が浅い人にとっては、SO で多くの質問をする可能性のある多くの落とし穴があります :)

セバスチャンが言及した clear:both 要素に関しては、それを回避する簡単な方法があります。内部にコンテナ div と 2 つのフローティング div があるとします。

HTML:

<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS:

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

このコードを実行すると、コンテナー div (マゼンタ色のもの) の高さが 1 ピクセルしかないのに対し、フローティング div は正しいことに気付くでしょう。これが Sebastian が言及した問題です。今、あなたは彼のアドバイスを受けて、あまりセマンティックではない br または float コンテナを追加することができます. overflow:hidden; を追加するだけです。次のようにコンテナ div に追加します。

#con { background:#f0f; overflow:hidden; }

これで、コンテナはフローティング div を適切にラップするはずです。

于 2008-11-21T22:32:00.373 に答える
1

親コンテナは、floatタグも割り当てられているか、clear：bothのbrがない限り、それらとともに拡張されません。下部にあります。

ポジショニングの代わりにfloat：leftを使用します。1つのオブジェクトが伸びると、ブラウザはすべての位置合わせを行います。したがって、気にする必要はほとんどありません。

于 2008-11-21T18:58:55.060 に答える
1

要素を明示的に配置するのではなく、display:inline を使用して要素にインライン レイアウトを使用するようブラウザに指示し、ブラウザに配置を処理させると思います。

フロートとポジショニングに関して、ポジショニングを使用してそれらを並べる唯一の方法は、絶対ポジショニングを使用することだと思います。つまり、要素を所定の位置に保つために、(ブラウザー ビュー ポートの) サイズ変更を処理する必要があります。

float プロパティを使用することで、ブラウザはサイズ変更の問題を処理し、要素を正しい場所に再レンダリングすると思います。

于 2008-11-21T19:13:06.140 に答える
0

このような状況でフロートすることの唯一の欠点は、左揃えまたは右揃えにする必要があることです。中央揃えはオプションではありません。ただし、幅に絶対値を使用していると述べたので、すべてのフローティング要素を DIV 要素にネストし、親 DIV に margin-right または margin-left を追加して、中央揃えをシミュレートできます。

于 2008-11-21T22:34:28.307 に答える