28

親divを左にフロートさせ、2 つの子divを右にフロートさせる必要があります。

親divは（仕様を正しく理解していれば）子を含めるのに必要なだけ広くする必要がありますdiv。これは、Firefoxなどでの動作です。

IE では、親divは 100% 幅に拡張されます。これは、子が右に浮いている浮動要素の問題のようです。テスト ページ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

残念ながら、子divの幅を固定できないため、親に固定幅を設定できません。

div親を子と同じ幅にする CSS のみの回避策はありdivますか?

4

8 に答える 8

12

http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/inline-blockのように IE6 で機能し、要素を right-floated のように動作させるソリューションを次に示します。<div>s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<title>Float with inline-block test</title>

<style type="text/css">
    .container {
        border-top: solid 10px green;
        float: left;
    }

    .tester1,
    .tester2 {
        float: right;
    }

    .tester1 {
        border-top: solid 10px blue;
    }

    .tester2 {
        border-top: solid 10px purple;
    }
</style>

<!--[if lte IE 7]>
<style type="text/css">
    .container {
        text-align: right;
    }

    .tester1,
    .tester2 {
        float: none;
        zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
    }
</style>
<![endif]-->

</head>

<body>
<div class="container">
    <div class="tester1">Tester 1</div>
    <div class="tester2">Tester 2</div>
</div>
</body>
</html>
于 2010-05-04T06:21:44.630 に答える
7

text-align: rightと を使用して解決策を思いつきましたdisplay: inline。

これを試して：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="margin-top: 10px; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
        <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
    </div>
</div>

例と同じように表示するには、マークアップ内の「テスター」ボックスの順序を切り替える必要があることに注意してください。新しいコンテナのマージントップという代替手段があると思いますが、今は調べる時間がありません。

他のすべてのブラウザーでよりクリーンなスタイルが必要な場合は、これを試してください。

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="float: right;">
        <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
        <div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
    </div>
</div>

これらのボックスの周りに物をレイアウトしたい場合、いくつかの異なる問題が発生する可能性があります. ただし、これらの問題は、この問題よりもはるかに簡単に解決できると思います。

これがお役に立てば幸いです。

于 2009-05-15T13:46:47.983 に答える
2

要件に合ったCSSのみのソリューションを思い付くことができませんでしたが、JavaScriptソリューションを使用したい場合は、次のコードが役立つでしょうか。divのスタイルは変更せず、ID、、、およびをdivに追加したmainだけsub1ですsub2。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
于 2009-05-12T10:49:02.233 に答える
2

私は同じ問題を抱えていて、子要素（右に浮かせたい）をposition：absoluteとright：0で配置することで解決しました。親要素に子要素用のスペースを確保するのに十分な適切なパディングを与えました...一撃の価値がありますが、すべてのアプリケーションで機能するとは限りません。

于 2012-04-02T13:20:53.523 に答える
0

あなたが始めることができる何かはこれです：

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

その結果は、少なくともあなたが探しているものの球場にあるようです。明らかに、必要に応じて微調整し、おそらくいくつかのcssロジックを追加して、ブラウザー<IE7にのみ適用する必要があります。

それがあなたが探しているものと正確に一致しない場合は、いくつかの負のマージンで遊んでみてください。

于 2009-05-13T16:24:31.443 に答える
0

外部divの代わりに単一セルテーブルを使用するのはどうですか？すべてを適切に配置するには、さらに作業が必要になる場合がありますが、テーブルは拡張されません。

于 2009-05-12T11:01:13.493 に答える
0

まず、インライン スタイルを使用しないのはなぜですか。

これを使用して、別の css ファイルで IE をターゲットにします。

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

これが直接的な質問ではないことはわかっていますが、IE は常に対処するのが面倒です! 私が知っているほとんどのデザイナー/開発者は、IE 用のまったく新しいスタイルシートを作成します。

于 2009-05-14T23:19:56.197 に答える
0

非常にハックですが、IE、chrome、および FF で問題なく動作する CSS のみのソリューションです。

私はカバの解決策を取りました - しかし問題は、IEでは問題なく動作しますが、他のすべてのブラウザでは2つの子divの間に4pxのスペースが表示されるということでした. 両方の div のコンテンツが拡張されても、スペースは 4px のままです。そのため、IE 条件ステートメントを使用して修正しました。私は世界で最高のコードのようには見えませんが、それは仕事を成し遂げます.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0; float: left;">

    <div style="border-top:solid 10px #00c; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>

        <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">

        <!--[if gte IE 5]>
        <div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
        <![endif]-->

         Tester1

        <!--[if gte IE 5]>
        </div>
        <![endif]-->


        </div>

    </div>
</div>
</body>
</html>
于 2010-05-04T05:11:35.510 に答える