css可变宽度2个盒子

Question

我是 CSS 新手。

我制作了 2 个 div。两者都包含一些文本。

第一个 div 是一个宽度不同的框。我希望第二个框始终位于第一个框右侧 50px，无论第一个框的宽度是多少。

我如何使用 css 做到这一点？

(我目前把左框设置为绝对定位)

Answer 1

HTML:

<div id="box1">
    <div id="box2"></div>
</div>

CSS:

#box1 {
    position:absolute;
    left:0; top:0;
    width:200px; height:200px;
    background:red; 
}

#box2 { 
    position:absolute; 
    right:-150px; top:0;
    width:100px; height:100px;
    background:blue;
}

此解决方案仅在右侧 DIV 的宽度固定时有效。在这种情况下，将 right 属性设置为 - (width + 50) px。在我的示例中，它是 -150px。

现场演示: http://jsfiddle.net/simevidas/U47Ch/