1

WordPressテンプレートで非常に奇妙な問題が発生しています。このように2つのdivを並べて配置したいと思います。

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

通常、これは正常に機能します-両方のdivが互いに直接接続する必要があります-しかし、style.css（cssリセットを使用）の何かにより、右側のdivが左側のdivと約5ピクセル重なるようになります。.css全体で検索しましたが、見つかりませんでした：（（これは、デフォルトのcssを使用したものでなければならないという事実です。

誰かがこれを引き起こしているものを知っています-いくつかの修正？

ありがとう

4

5 に答える 5

0

どちらにdivsも幅がありますか？それらに両方を与えwidth、float 最初 のdivにleft追加します。margin-right

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

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

于 2011-03-08T16:27:17.573 に答える
0

両方を左にフロートさせるか、インラインブロックを使用します。最初のものを左に浮かせることもできます。

于 2011-03-10T04:05:08.550 に答える
0

（まだお持ちでない場合は）FireFoxをダウンロードして、WebDeveloperToolbarプラグインをインストールすることを強くお勧めします。このプラグインは、このような問題を追跡するのに最適です。問題のあるページを表示しているときに、このツールバーのCSS部分で、[スタイル情報の表示]を選択できます。次に、ページで問題となっているdivをクリックするだけです。左側に小さなウィンドウがポップアップ表示され、これらのdivに影響を与えているすべてのスタイルとそれらがどのcssソースからのものであるかが示されます。CSSを使用すると、実際にはバグではないものを修正するために「バグ」修正に依存している場合、ほとんどの場合、後でさらに頭痛の種が発生します。

于 2011-03-10T04:37:23.050 に答える
0

問題はおそらくコードのさらに先の部分にあると思います。フロートをクリアすることをお勧めします：

HTML：

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

CSS：

.clear {
     clear: both;
}

あなたが投稿したコードは問題なく動作しますが、もっと多くのdivやコンテナー、またはそれを台無しにしている何かがあると思います。

于 2011-05-26T09:20:13.167 に答える
0

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

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

于 2012-01-22T01:40:25.640 に答える