將四個div放在一個包裝中，只有一個顯示自己

我試圖創建一個包裝在其中4個div彼此相鄰（兩個彼此相鄰，下方是剩下的兩個）。然而問題是，是否只有第四個正在顯現。我試過設置溢出：隱藏，玩具與顯示屬性，並試圖使用float：left和float：right。但迄今爲止沒有運氣。將四個div放在一個包裝中，只有一個顯示自己

這是我使用的CSS：

html, body{ 
width: 100%; 
height: 100%; 
} 

#wrapper{ 
width: 60%; 
height: 60%; 
top: 20%; 
left: 20%; 
position: relative; 
overflow: hidden; 
border: 1px solid #000; 
} 

#one{ 
background-color: red; 
width: 50%; 
position: absolute; 
height: 50%; 
} 

#two{ 
background-color: green; 
width: 50%; 
position: absolute; 
height: 50%; 
} 

#three{ 
background-color:blue; 
width: 50%; 
position: absolute; 
height: 50%; 
} 

#four{ 
background-color: yellow; 
width: 50%; 
position: absolute; 
height: 50%; 
}

，這是html代碼與它去：

<html><head> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head><body> 
<div id="wrapper"> 
    <div id="one">a</div> 
    <div id="two">b</div> 
    <div id="three">c</div> 
    <div id="four">d</div> 
</div> 
</body></html>

誰能弄清楚爲什麼黃（四）個DIV是唯一一個顯示自己，即使我讓它正確地浮動和其他人離開？（除此之外，我還想知道爲什麼滾動條出現的原因是寬度：100％，身高部分爲100％）。

來源

2012-07-24 Gooey

這是因爲您將所有四個div設置爲絕對位置。然後您必須使用頂部，底部，右側或左側來定位它們。當你完全放置一個元素時，它會被取出文檔的流程。

jsFiddle example

CSS

#one{ 
background-color: red; 
width: 50%; 
position: absolute; 
height: 50%; 
} 

#two{ 
background-color: green; 
width: 50%; 
position: absolute; 
height: 50%; 
right:0; 
top:0; 
} 

#three{ 
background-color:blue; 
width: 50%; 
position: absolute; 
height: 50%; 
left:0; 
bottom:0; 
} 

#four{ 
background-color: yellow; 
width: 50%; 
bottom:0; 
right:0%; 
position: absolute; 
height: 50%; 
}

的第二個選項是去除絕對定位，浮動他們都離開了。

jsFiddle example

CSS：

#one,#two,#three,#four { 
float:left; 
}

來源

2012-07-24 14:56:57 j08691

到底會發生什麼，然後，如果它從流去掉？ – Gooey 2012-07-24 14:59:26

它們位於具有位置集的第一個父代的左上角。 – j08691 2012-07-24 15:00:07

浮法您的內部元素。在這裏看到：

http://jsfiddle.net/dkGBA/1/

的主要變化：

.child 
{ 
    width: 50%; 
    height: 50%; 
    float: left; 
} 

<div id="one" class="child">a</div> 
<div id="two" class="child">b</div> 
<div id="three" class="child">c</div> 
<div id="four" class="child">d</div>

來源

2012-07-24 14:56:58

不要使用位置這一點，而是使用浮動。

例子：

http://jsbin.com/ucofed/edit

來源

2012-07-24 15:00:16

有趣的是，我將在這個浮動示例上搜索一些讀物。 – Gooey 2012-07-24 15:05:59

將四個div放在一個包裝中，只有一個顯示自己

回答

相關問題