CSS 相对绝对位置答案

【问题标题】：CSS relative absolute positionCSS 相对绝对位置
【发布时间】：2013-04-04 07:40:26
【问题描述】：

我只有一个容器 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，并显示在其他两个容器的顶部。

我错过了什么？谢谢！

【问题讨论】：

mikepadgett.com/technology/technical/…

标签： css position css-position

【解决方案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;
}

【讨论】：

除非你也浮动容器-div，否则它不起作用......不要问我为什么，因为我很困惑
你需要一个明确的修复（在我的 jsfiddle 中它是空的 div）。更多信息：jonrohan.me/guide/css/clear-fixes

【解决方案2】：

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

这里是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

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

【讨论】：

因为如果容器 div 包含具有浮动的 div。然后外部 div 将不会展开，内部 div 将显示在容器 div 的外侧。尝试在 codepen 示例中从容器 div 中删除浮点数。你会看到结果。
是的，感谢您指导我。但对于未来的 html 代码。如果我们在容器 div 中有模式 div 并且我们都使用 clear 。那么它会弄乱其他 div 并且其他 div 将在其他行中并排可见。

【解决方案3】：

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

【讨论】：

问题是如果我只是浮动它们，container-div 不会包含其他两个

【解决方案4】：

你想达到this fiddle吗？

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

【讨论】：

不客气。如果我的回答有帮助，请将其标记为答案。 :)