css - CSS 相对绝对位置

Question

我只有一个容器 div 元素，其中包含两个 div 元素，它们应该出现在容器 div 两侧的同一级别。以下解决方案不起作用：

<div id="result" >
    <div class="right">Update</div>
    <div class="left">delete</div>
</div>

样式表如下：

div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}

container-div 的蓝色边距不包含其他两个 div，并出现在其他两个容器的顶部。

我错过了什么？谢谢！

Answer 1

理想情况下 .left 和 .right div 会浮动：

div.left{
    float: left;
    margin: 5px;
    color: green;
    border-style:solid;
    border-color: green;
}

div.right{
    float: right;
    margin: 5px;
    color: red;
    border-style:solid;
    border-color: red;
}

Answer 2

你可以尝试的是 float:left 到你试图并排放置的两个元素，这应该推动它们，看看它是否有效并让我知道。

Answer 3

你已经放置了基本上不需要的位置。看下面的答案

html在这里

<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>

这里的 css

div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;

}

活的例子在这里。 http://codepen.io/anon/pen/waKrH

如果这对您有帮助，请标记为答案。

Answer 4

你想实现这个小提琴吗？

更好的方法是将绝对值更改为相对值，浮动。如果你使用浮动，不要忘记添加overflow:hidden;到父容器。