2 Column Div浮动左边和右边的子div div123s

我找不到解决此问题的好方法。我有一个父div内的2个div。当我尝试和浮动div的权利和离开，使父栏div内的2列，子div最终在父div下。2 Column Div浮动左边和右边的子div div123s

<head> 
    <link rel="stylesheet" type="text/css" href="float.css" /> 
</head>  

<body class="wrapper"> 
    <div class= "whole"> 
     <div class="left"> 
      <p> Hello </p> 
     </div> 
     <div class="right"> 
      <p> Hello Again</p> 
     </div> 
    </div> 
</body>

CSS是

.whole { 
    padding: 30px 30px 15px 30px; 
    background-color: yellow; 
    margin-bottom: 30px; 
} 
.left { 
    width:50%; 
    position:relative; 
    float: left; 
    background-color:green; 
} 
.right { 
    width:50%; 
    position:relative; 
    float: right; 
    background-color:red; 
}

为什么会在孩子的内容div的“左，右”是父DIV“整”下面？

来源

2010-08-31 Peter

尝试增加这些属性父如whole：

position:relative; 
overflow:auto;

而这个CSS来子div

position:absolute: 
top: xxx; 
left: xxx;

请注意，你应该为这是应该的元素使用id而不是类在文档中只有一个。

来源

2010-08-31 20:50:38 Sarfraz

溢出：auto;效果很好。我不必更改子div或父母的位置。 – Peter 2010-08-31 21:14:28

我更喜欢overflow：hidden，因为overflow：auto可以在div上显示滚动条，如果内容比它大。 – 2012-10-03 19:40:11

这很简单。浮动使得元素“浮动”出正常的页面内容，这就是为什么它已经低于你的容器div。而不是使用div作为你的孩子的元素，尝试使用一个跨度几乎相同的东西，但会愉快地坐在一起。

来源

2010-08-31 20:49:49

此问题通常被称为清除浮动。此页面有几个解决方案http://www.positioniseverything.net/easyclearing.html以及更新信息的链接。 “当浮动包含在具有可见边框或背景的容器框中时，该浮动不会自动强制容器的底部边缘，因为浮动较高，而是浮动被容器忽略，容器底部就像一面旗子。“

来源

2010-08-31 20:58:12 joelt

清除溢出：auto;或者使用clearfix：对父div的窍门应该足够了。我不会给孩子绝对的定位，因为这会阻止包装页面下面的任何元素自然流动。

来源

2010-08-31 21:04:45 staticvoid

2 Column Div浮动左边和右边的子div div123s

回答

相关问题