0

いくつかのテキストを格納する float left プロパティを持つ仕切りがあり、次に画像を格納する仕切り float があります。両方の仕切りの合計幅は 735 を超えてはならず、画像用に 200 を予約しています。画像が存在する場合は最初の分割線の幅を 535 に、画像が非表示の場合は 735 に調整するにはどうすればよいですか?

<div style="width:735px">
    <div style="float:left; width=????????>
        some text here
    </div>
    <div style="float:right">
        <img src="../images/biteme.png" alt="" style="height:auto; width:auto; max-height:115px; max-width:200px; display:block" />
    </div>
</div>
4

3 に答える 3

3

純粋な CSS でこれを行うのは簡単ですが、別のアプローチが必要になります。1 つの div のみをフロートすると、もう 1 つの div が残りのスペースを自動的に占有します

デモhttp://jsfiddle.net/kevinPHPkevin/gAUR5/

img {
    width: auto;
    height: auto;
    max-width: 200px;
    display: block;
}

imgcss を に設定display: noneし、他の div が残りのすべてのスペースを占めていることを確認します。

于 2013-07-17T19:54:01.677 に答える
1

これがあなたの質問に適切に答えるかどうかはわかりませんが、1つの解決策は、固定幅ではなく、左のdiv（分割）の幅を「自動」に設定することだと思います。また、左側の div が右側の div のサイズの変更に対応できるように、両方の要素を右にフローティングすることを検討する必要があります。

それ以外の場合は、JavaScript を使用して DOM 要素に影響を与える必要があります (JQuery を使用すると簡単になります)。

于 2013-07-17T19:49:18.847 に答える
1

JQuery を使用できる場合は、次のトリックが実行されます。

$(document).ready(function(){
    var width;
    if($('#outerdiv #rightdiv img').is(":visible")) {
        width = 735;
    } else {
        width = 535;
    }
    $('#outerdiv #leftdiv').css('width', width);
});

JQuery が使えないと、やりたいことが実現できないと思います。

于 2013-07-17T19:49:25.230 に答える