12

タイトルといくつかのツール ボタンを含むヘッダー バーを持つ単純なボックスを作成したいと考えています。次のマークアップがあります。

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

これは Firefox と Chrome でうまくレンダリングされます:

http://www.boplicity.nl/images/firefox.jpg

ただし、IE7 は完全に台無しになり、正しいフロート要素をページの右側に配置します。

http://www.boplicity.nl/images/ie7.jpg

これは修正できますか？

4

6 に答える 6

23

一番外側のdivで幅を指定します。コンテンツ div の幅が、これがボックスの合計幅であることを意味する場合は、単純にそれを最も外側の div に追加し、(オプションで) 次のようにコンテンツから削除します。

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>
于 2008-10-09T13:46:23.977 に答える
3

これは簡単な答えなので、うまくいかない場合は手を挙げてください。幅ではなく最小幅を追加するだけで、マルコのソリューションがおそらく機能すると思います。ie6 にも対応しようとしている場合は、最小幅が ie6 でサポートされておらず、その子孫であるため、ハックを使用する必要がある場合があります。

したがって、これは IE7 およびその他の最新のブラウザーで動作するはずです。min-width を適切なものに設定します。

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>
于 2008-10-09T15:37:17.997 に答える
2

非IEブラウザーの動作をエミュレートするためにjQueryを使用して修正しました。

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }
于 2009-06-24T19:39:19.840 に答える
1

最近、右のフロート要素に他の要素の前にdivを追加する必要があることを知りました。これは、変更の行を追加せずに最も簡単な修正です。

<div style="background-color:blue; padding: 1px; height: 20px;">
    <div style="float: right; background-color:green;">title</div>
    <div style="float: left; background-color:yellow;">toolbar</div>
</div>
于 2012-01-06T15:19:25.603 に答える
1

position:relative;親要素と子要素に入れてみてください。それは私にとって問題を解決しました。

于 2010-11-13T19:42:27.580 に答える
-2

これを<div style="background-color:blue; padding: 1px; height: 20px;>2 つのフローティング div の親にもしますclear:all

于 2008-10-09T13:45:42.293 に答える