在百分比（％）perent div内的位置绝对div的宽度问题

I have two divs, .div1 & .div2, each with a width of 20%. I also have a another div .bar inside of .div1. This .bar div has a positioning of absolute left 100%. I want .bar (blue div) to remain at same point at different screen sizes.

我有两个div,.div1和.div2,每个都有20%的宽度。我在.div1中还有另一个div .bar。这个.bar div的绝对左侧定位为100%。我希望.bar(蓝色div)在不同屏幕尺寸下保持同一点。

What would be the procedure to keep the blue bar and gray div in same point with different screen size?

将蓝色条和灰色div保持在不同屏幕尺寸的同一点的步骤是什么?

HTML

<div class="div1">
    <div class="bar">
        This is a Bar
    </div>
</div>
<div class="div2">
    this is Div 2
</div>

CSS

.div1{
    background:red;
}
.div2{
     background:#ccc;
     margin-top:25px !important;
}
.div1,.div2{
    position:relative;
    width:20%;
    float:left;
    margin:0px 10px;
    height:180px;
}
.bar{
    background:blue;
    position:absolute;
    left:100%;
    top:0px;
    width:130px;
    z-index:10;

}

Fiddle

1 个解决方案

#1

here you go

干得好

http://jsfiddle.net/97s283he/2/

.div2{
     background:#ccc;
     left: 100px;
    margin-left: 0px;
}
.div1,.div2{
    position:relative;
    width:20%;
    float:left;
    height:180px;
}