2012-12-16 101 views
3

有人可以寫CSS片段來做到這一點嗎?對齊2跨一個左和右另一個div

<div class="container"> 
    <span class="left">Left</span><span class="right">Right</span> 
</div> 

這裏的CSS爲.container

.container { 
    position:absolute; 
    bottom:0; 
    margin: 0 5px 5px 5px; 
} 

注意的位置是絕對的,因爲這是它包含的元素上的 「絕對positionated」。

我已經嘗試了float:left/float:right兩個嵌套元素,但沒有任何反應。

回答

4

設置要阻止的元素,設置寬度並將它們浮動。

.left{ 
    display: block; 
    float:left; 
    width: 100px; 
} 

.right{ 
    display: block; 
    float:right; 
    width: 100px; 
} 

例子:http://jsfiddle.net/LML2e/

+0

這不是解決辦法和'float'已經引起了'顯示:塊;',它只是罰款在這種情況下。 –

+0

這太好了。一個注意:寬度也可以是一個百分比,這是很酷的。 –

2

float: leftfloat: right將很好地工作,當你設置一個(相對或絕對),寬度爲您.container DIV

Demo

.container { 
    position:absolute; 
    bottom:0; 
    margin: 0 5px 5px 5px; 
    width: 200px; //either absolute width 
    width: 100%; // or relative width 
} 

附註:如果您設置了.containerwidth: 100%由於margin的原因,您將看到醜陋的滾動條。只需使用.left.right類中的margin即可。見here

+0

好吧,我只是忘了設置widht:100%;到容器。非常感謝。只需要更多的事情:讓我們假設將.left的字體大小設置爲200%,如何才能讓.left和.right對齊.container元素的底部? – Max

+0

這不可能用'float'。也許你應該使用'display:inline-block'來代替。 http://jsfiddle.net/RBFJ5/7/其他選項是使用表格 – Horen

0

您需要設置一個寬度才能使用float。如果你想100%的寬度可以設置.container { width: 100%; }或改善你的代碼是這樣的:

.container { 
    position:absolute; 
    bottom:5px; 
    left:5px; 
    right:5px; 
} 
相關問題