html - 对齐 2 在 div 内一左一右

Question

任何人都可以编写 CSS 片段来执行此操作吗？

<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;
}

请注意，该位置是绝对的，因为它在其包含元素上是“绝对定位的”。

我已经在两个嵌套元素上尝试过float:left/但没有任何反应。float:right

Answer 1

将元素设置为块，设置宽度并浮动它们。

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

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

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

Answer 2

float: leftfloat: right当您为您的.containerdiv设置（相对或绝对）宽度时，它将完美地工作

演示

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

旁注：如果你设置.container为width: 100%你会得到丑陋的滚动条，因为margin. 只需margin在.left和.right类中使用。见这里。

Answer 3

您需要设置宽度才能使用float. 如果您想要 100% 的宽度，您可以将.container { width: 100%; }代码设置或改进为：

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