如何在不同的屏幕尺寸下使两个不同的div宽度相同

最后发布: 2014-08-14 16:33:01


问题

我有两个Div,类名.div1和.div2,宽度:20%; 每。 在.div1内部,我还有另一个div名称.bar

该.bar div的位置绝对为100%。 我试图使.bar div的端点和.div2的端点应保持在同一屏幕上的同一点,如下图所示: 在此处输入图片说明

您会看到Green Bar(.bar)和Gay Div(.div2)的端点在一条直线上。 但是,如果我增加或减少屏幕的大小,它们就不会保持一致。 我有很多方法,但没有用。 仅CSS有可能吗? 还是需要任何jQuery帮助? 如果需要任何jQuery,谁能帮助我该怎么做? 因为我对jQuery不满意。

这是HTML:

    <div class="div1">
      <div class="bar"></div>
    </div>
    <div class="div2">

    </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:green;
    position:absolute;
    height:20px;
    left:100%;
    top:0px;
    width:114%;
    z-index:10;

}

提前致谢。 小提琴

javascript jquery css