テンプレートの問題：浮動小数点の負の余白

Question

私はwordpressテンプレートに非常に奇妙な問題があります。 私はこのようなお互いのほかに2つのdivを配置したいと思います：

<div style='float:left;'> 
    left div 
</div> 
<div style='float:right'> 
    right div 
</div> 

それがなければならないとして、通常、これは動作します - 両方のdiv要素が互いに直接守らなければならない - のstyle.cssで 何かを（CSSを使用しましたリセット）は右のdivと左のdivを〜5pixelsでオーバーラップさせます。 私はそれのために全体の.cssを検索するが、見つけることができませんでした：（（ それがデフォルトCSSで何かでなければならないことだけ事実です

誰もがこの原因になっていることを知っている - いくつかの修正

。？

おかげ

Answer 1

？あなたのdivs持つ幅のいずれかを実行し、それらをwidth、floatを付けBOTHleftと最初のdivにmargin-rightを追加します。

幅+マージンが周囲のdivよりも大きくならないようにしてください。たとえば、周囲のdivが600pxの場合、ボックスはwidth:290px;で、左のdivにはmargin-left:20px;を超えてはいけません。

また、Firebugまたはその他のWeb開発broswerツールを使用して、スタイルシートのどのスタイルがdivに影響しているかを確認することができます。

Answer 2

浮動小数点は、両方とも左かインラインブロックを使用します。また、最初のものを左に浮かべることもできます。

Answer 3

FireFoxをダウンロードしてWeb Developer Toolbarプラグインをインストールすることを強くお勧めします。このプラグインは、このような問題を追跡するために非常に有効です。このツールバーのCSS部分では、問題があるページを表示しているときに「スタイル情報の表示」を選択できます。次に、ページ上の問題であるdivをクリックします。左側には、小さなウィンドウのポップアップが表示され、それらのdivに影響を与えているすべてのスタイリングと、それらが出てくるCSSソースが表示されます。 CSSを使用すると、バグではないものを修正するための「バグ」修正に頼ると、ほとんどの場合後で頭痛が増えます。

Answer 4

私の問題はおそらくあなたのコードの上に部品があると思われます。

HTML：：

<div class="clear"></div> 

CSS：

.clear { 
    clear: both; 
} 

あなたが投稿したコードが正常に動作しますが、私はあなたがより多くのdivまたはコンテナまたはどこかに何かを持っている期待して、私は山車をクリア提案することができますそれはそれを台無しにしている。

Answer 5

合計幅= margin_width + border_width + padding_width +ボックスの幅+（他のボックスと同じ）。

浮動デバイスの両方に幅が定義されていることを確認してください。最善の方法は、F12を押してコードをデバッグすることです。 FireFox、IE、Chrome、Safariのいずれかができますが、通常はこのオプションを自分で有効にする必要があります。