2

I was able to do what I need to do with js, you can see it here, resize the window to see what I mean.

The code is:

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

The idea is that the red div is always "centered" but the part of the green div that overflows the read one (pointed with the arrow) is always the same:

enter image description here

But it doesn't look that that good when you resize it, is it possible to this with only css? Or modify the js so that it looks more fluid?

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;）并始终恰好在屏幕中间结束（width:50%;） . 但是因为红色div总是居中，所以它隐藏了绿色div的右端。

蓝色div 在这里添加您想要的额外内容。只要确保正确的值正好是宽度的负值（这里是正确的：-20px；和宽度：20px；}。结果，红色和蓝色 div 之间永远不会有间隙，蓝色div 总是 20px 大。

于 2013-01-31T23:37:29.810 回答