对齐2跨一个左和右另一个div

有人可以写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两个嵌套元素，但没有任何反应。

来源

2012-12-16 Max

设置要阻止的元素，设置宽度并将它们浮动。

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

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

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

来源

2012-12-16 17:59:38

这不是解决办法和'float'已经引起了'显示：块;'，它只是罚款在这种情况下。 –

这太好了。一个注意：宽度也可以是一个百分比，这是很酷的。 –

float: left和float: right将很好地工作，当你设置一个（相对或绝对），宽度为您.container DIV

Demo

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

附注：如果您设置了.container至width: 100%由于margin的原因，您将看到丑陋的滚动条。只需使用.left和.right类中的margin即可。见here。

来源

2012-12-16 17:59:54 Horen

好吧，我只是忘了设置widht：100％;到容器。非常感谢。只需要更多的事情：让我们假设将.left的字体大小设置为200％，如何才能让.left和.right对齐.container元素的底部？ – Max

这不可能用'float'。也许你应该使用'display：inline-block'来代替。 http://jsfiddle.net/RBFJ5/7/其他选项是使用表格 – Horen

您需要设置一个宽度才能使用float。如果你想100％的宽度可以设置.container { width: 100%; }或改善你的代码是这样的：

.container { 
    position:absolute; 
    bottom:5px; 
    left:5px; 
    right:5px; 
}

来源

2012-12-16 18:02:09

对齐2跨一个左和右另一个div

回答

相关问题