CSS相对绝对位置

我只是有一个容器div元素，它包含两个div元素，它们应该出现在容器div两侧的同一级别。下面的解决方案不起作用：CSS相对绝对位置

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

从容器格蓝保证金不包含其他两个div和其他两个容器的顶部出现。

我错过了什么？谢谢！

来源

2013-04-03 kurro

http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/ – David 2013-04-03 23:36:47

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

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

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

来源

2013-04-03 23:34:05

它的工作原理..为什么你应该浮动容器div？ – kurro 2013-04-03 23:42:35

因为容器div包含有浮动的div。然后外部div不会展开，内部div将显示在容器div的一侧。尝试在codepen示例中从容器div中删除float。你会看到结果。 – 2013-04-03 23:45:31

还有其他方法可以清除浮标。 http://codepen.io/cimmanon/pen/qDjdr – cimmanon 2013-04-04 00:10:27

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

来源

2013-04-03 23:31:51 Raegon

的问题是，容器DIV不envolves其他两个，如果我只是把它们飘浮 – kurro 2013-04-04 00:02:13

理想的。左和.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; 
}

来源

2013-04-03 23:35:27 chrx

它不工作，除非你也浮动容器div ...不要问我为什么，因为我感到困惑 – kurro 2013-04-03 23:47:26

你需要一个明确的修复（在我的jsfiddle它是空的div）。更多信息：http://jonrohan.me/guide/css/clear-fixes/ – chrx 2013-04-03 23:50:20

你想实现this fiddle？

更好的办法是把apsolute改成相对的，有浮动的。如果您使用浮动，不要忘记将overflow:hidden;添加到父容器。

来源

2013-04-03 23:39:59 trajce

嗨，谢谢，...我一直在寻找！ – kurro 2013-04-03 23:53:25

不客气。如果我的答案有帮助，请将其标记为答案。 :) – trajce 2013-04-03 23:55:50

CSS相对绝对位置

回答

相关问题