Question

我是css的新手。

我做了2个div。两者都包含一些文字。

第一个div是一个宽度不同的盒子。我希望第二个盒子总是在第一个盒子的右边50px，无论第一个盒子的宽度是多少。

我怎样才能用css做到这一点？

（我目前左框设置为绝对定位）

Answer 1

像这样，

* {padding: 0; margin: 0;}

div {float: left; height: 100px;}
#left {padding: 0 50px 0 0; width: 100%;}
#right {position: absolute; right: 0; top: 0; width: 50px;}

<div id="left">
<div id="right">
</div>
</div>

这样就可以了。

Answer 2

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/

Answer 3

我认为这适用于任何一个列中的任何长度文本，任何大小的容器：

<style type="text/css">
    #left {padding-right:100px; float:left; display:inline; position:relative;}
    #right {position: absolute; right: 0px; top: 0px; width: 50px; overflow:hidden;}
</style>

<div id="left">
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur 
    </div>
    Aliquam congue odio sed dolor rhoncus malesuada.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum elementum pellentesque.
</div>

仅在FireFox中测试过。 #left的右边填充必须始终是#right加上50的宽度。

Answer 4

<style type="text/css">
    #divBox2 { margin-left: 50px; }
</style>

边距只需在box2的左边增加50px，这意味着box2的剩余空间总是50px，因此在方框1和方框2之间，也会删除方框1的绝对位置。

<div id="divBox1">
</div>
<div id="divBox2">
</div>

css可变宽度2盒

4 个答案: