4

たとえば、次のような（不自然な）例がある状況があります。

<div id="outer" style="margin: auto>
    <div id="inner1" style="float: left">content</div>
    <div id="inner2" style="float: left">content</div>
    <div id="inner3" style="float: left">content</div>
    <br style="clear: both"/>
</div>

どの要素にも幅が設定されておらず、私が望むのは#inner1, で#inner2あり、#inner3内部で水平に隣り合って表示されます#outerが、起こっているのは#inner1と#inner2が隣り合って表示#inner3され、次の行に折り返されていることです。

これが発生している実際のページでは、さらに多くのことが行われていますが、Firebug を使用してすべての要素を非常に注意深く調べましたが、要素がandと#inner3同じ行に表示されず、幅が広くなる理由がわかりません。#inner1#inner2#outer

だから、私の質問は次のとおりです:ブラウザが#outerのサイズを変更している理由、または前の「行」に配置する十分なスペースがあるにもかかわらず、なぜラップを選択しているのかを判断する方法はありますか? #inner3この問題に対する具体的な解決策を明らかにした上で、HTML/CSS/Web UI の専門家が、フロントエンドで作業していることに気付いた貧弱なバックエンド開発者のために、どのようなヒントやテクニックを持っていますか?

4

4 に答える 4

4

すべてのレイアウトの問題が正確にわかるツールがあると便利ですが、この場合、ブラウザはページを正確にレンダリングしました。フロートの合計幅が、含まれているブロックの幅を超えました。したがって、最後の行は新しい行にドロップします（これは、フロート自体ではなく、フロート内のコンテンツによって通常発生するIE6拡張ボックス/フロートドロップの問題とは少し異なります）。したがって、この場合、ページに問題はありませんでした。

これをデバッグするには、FirebugでHTMLを調べて、ブロックのどの子がブロックの幅を超えているかを把握するだけです。Firebugは、この目的のために多くの情報を提供しますが、電卓を使用する必要がある場合もあります。どの要素が他の要素を制約するかを確認できることについてあなたが説明したことは、特に通常の流れから削除される要素（フロートや配置された要素など）の場合、単純に複雑すぎて圧倒されると思います。

また、CSSレイアウトがどのように役立つかについての理解も深まります。かなり複雑になる可能性があります。

たとえば、フロート要素に明示的な幅を割り当てることをお勧めします。W3CCSS2仕様では、フロートには明示的な幅が必要であると記載されており、それなしで何をするかについての指示はありません。最近のほとんどのブラウザは「縮小して合わせる」方法を使用しており、コンテンツの幅に制限されると思います。ただし、これは古いブラウザでは保証されておらず、3列のレイアウトのようなものでは、フロート内のコンテンツの幅に翻弄されることになります。

また、IE6との互換性を追求している場合は、同様の問題を引き起こす可能性のあるフロート関連のバグがいくつかあります。

于 2008-09-05T01:30:43.377 に答える
2

Firefox 用Web 開発者プラグインをお試しください。具体的には、[情報] -> [ブロック サイズの表示]および[アウトライン] -> [ブロック レベル要素のアウトライン]オプションです。これにより、要素の境界線と、Firefox が認識するサイズを確認できます。

于 2008-09-04T21:53:27.143 に答える
0

Firebug の CSS タブでは、選択した要素にカスケード順序で適用されるスタイル ルールを確認できます。これは、問題の解決に役立つ場合とそうでない場合があります。

私の推測では、 #inner3 のコンテンツに関する何かが原因で最初の行の下に折り返されており、 #outer は、必要なより小さなスペースに対応するようにサイズが調整されているだけです。

于 2008-09-04T22:30:20.690 に答える
0

だから私は私の特定のケースで答えを見つけました-それとその中のすべてを圧縮する特定の左/右マージンが設定されたDOMのはるかに上にdivがありました。

しかし、問題の核心は、この種の問題をどのように簡単にデバッグできるかということです。たとえば、この場合に最適なのは、Firebug で、レイアウト パネルの要素のサイズにカーソルを合わせると、「外側の要素 X によって制限された幅、要素のスタイル Z によって制限された高さ」のようなツール ヒントが表示されることです。 Q」または「内部要素 A、B、および C によって寄与される幅」。

このようなことを書く時間があればいいのですが、Firefox のレンダリング エンジンからその情報を取得するのは (不可能ではないにしても) 難しいと思います。

于 2008-09-04T22:53:48.247 に答える