Question

有人可以编写CSS片段吗？

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

以下是.container的CSS：

.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: left div

设置（相对或绝对）宽度时，

float: right和.container将完美运行

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，您会看到丑陋的滚动条。只需使用margin和.left类中的.right即可。请参阅here。

Answer 3

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

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

对齐2跨越一个div，另一个向右跨越div

3 个答案: