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

回答

相關問題