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/

Answer 2

這樣，

* {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 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> 

保證金只是增加了50像素到BOX2的左側，這意味着總是會有的左BOX2的空間50像素，因而盒1和之間2，同時刪除盒子1的絕對定位。

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