Question

我只有一个容器div元素，它包含两个div元素，它们应该出现在container-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将为floated：

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

你可以尝试浮动：留给你试图并排放置的两个元素，这应该推动它们，看它是否有效并告诉我。

Answer 3

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

html here

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

这里

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

您是否尝试实现this fiddle？

更好的方法是使用浮动将apsolute更改为relative。如果您使用浮动，请不要忘记将overflow:hidden;添加到父容器。

CSS相对绝对位置

4 个答案: