2

必要なことは js で行うことができました。ここで確認できます。ウィンドウのサイズを変更して、意味を確認してください。

コードは次のとおりです。

$(window).resize(function() {
   var offset = $("#two").offset();
    $('#three').css('width',offset.left+320); 
});

アイデアは、赤い div は常に「中央に配置」されますが、緑色の div の読み取り部分 (矢印で示されている部分) をオーバーフローする部分は常に同じです。

ここに画像の説明を入力

しかし、サイズを変更するとあまりよく見えません.cssだけでこれを行うことはできますか？または、より滑らかに見えるように js を変更しますか?

4

2 に答える 2

3

緑の div が絶対的に配置される場合、その外側の幅は 50% + 赤の div の幅の半分 + 必要な固定の余分な幅 (赤の div の右側) である必要があります。

#three{
    ...
    position: absolute;
    width:50%;
    padding-right:120px; /* half of 200 + 20 extra pixels */
}

フィドルを見る

于 2013-01-31T22:54:48.207 に答える
2

2 div で実現可能です。

実際の例: http://jsfiddle.net/RP24h/

HTMLコード

<div id="green"></div>
<div id="red">
    <div id="blue"></div>
</div>

CSS コード

body{ padding-top:60px;}
div{ height:100px;}
#green{ background:green; position:absolute; left:0; top:60px; width:50%;}
#red{ background:red; width:400px; margin:0 auto; position:relative;}
#blue{ background:blue; position:absolute; right:-20px; top:0; width:20px;}

ここでの考え方は、通常と同じように赤を中央に配置することです。緑のdivは絶対位置に配置され、幅は 50% であるため、常に画面の左側から始まり (left:0; を使用)、常に画面のちょうど中央で終了します (幅:50%; を使用)。 . ただし、赤いdiv は常に中央に配置されるため、緑のdivの右端が隠されます。

青いdiv は、必要なものを追加するためにここにあります。正しい値が正確に幅の負の値であることを確認してください (ここでは正しい:-20px; and width:20px;}。その結果、赤と青の div と青の間にギャップが生じることはありません。 div は常に 20px の大きさになります。

于 2013-01-31T23:37:29.810 に答える