0

以下のコードは、固定 div の隣に流動 div を作成しています。

float を使用せずにこれと同じ結果を得る方法はありますか?

<div id="wrapper" style="width: 100%">
  <div id="left" style="background-color: Blue; height: 100px; float: right; width:     200px;margin-left:10px;"></div>
  <div id="right" style="background-color: #5a71e5; height: 100px; margin-right: 210px;">
</div>

jsfiddle:

http://jsfiddle.net/3P9XN/4/

4

3 に答える 3

1

jQuery を使用することにオープンであるかどうかはわかりません。はいの場合は、次のことができます。

すべてのフロートを取り除き、ラッパーdisplay:inline-blockに追加し、 jQuery を使用してラッパーの合計幅から差を引いた値を計算し、それを に設定します。 divleft div widthright div

HTML

<div id="wrapper">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

CSS

#left{
    background-color: Blue; 
    height: 100px; 
    width: 200px;
    margin-left:10px;
}

#right{
    background-color: #5a71e5; 
    height: 100px; 
}

#wrapper div {
    display: inline-block;
}

#wrapper{
    width:100%;
}

jQuery

$('#right').width($('#wrapper').width() - $('#left').width() - 20);

サンプル フィドル: http://jsfiddle.net/3P9XN/12/

アップデート

応答性のためにウィンドウのサイズ変更検出を追加

http://jsfiddle.net/3P9XN/14/

Update2

Marc の提案に従ってソリューションを更新し、スクリプトを通じて outerWidth と css マージンの値を取得するようになりました。よりダイナミックでクリーンなアプローチ。

jQuery

 $(document).ready(setRightWidth);

 $(window).resize(setRightWidth);

 function setRightWidth(){
        var leftmargin = parseFloat($('#left').css('margin-left'));
        var width = $('#wrapper').outerWidth(true) - $('#left').outerWidth(true) - leftmargin;
        $('#right').width(width);
 }

http://jsfiddle.net/3P9XN/17/

于 2013-07-03T19:44:52.850 に答える
0

高さと幅がかなり明確に定義されているため、常に絶対配置を試すことができます。

#wrapper {
    width: 100%;
    height: 100px;
    border: 1px dotted gray;
    position: relative;

}
#left {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: blue;
}
#right {
    position: absolute;
    left: 0;
    right: 210px;
    top: 0;
    bottom: 0;
    background-color: #5a71e5;
}

HTML は同じままです... もちろん、インライン スタイルはありません。

デモ フィドル: http://jsfiddle.net/audetwebdesign/QypQG/

于 2013-07-03T19:45:08.867 に答える