浮動div下的位置div

Question

今天一個簡單的問題，但似乎無法找到解決方案。我有四個divs - 我想#down直接放在#up下面，但是我的生活無法弄清楚。這是我的CSS和HTML。

#up { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
} 
 
#down { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#mid { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#right { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
}

<div id="up"></div> 
 
<div id="mid"></div> 
 
<div id="right"></div> 
 
<div id="down"></div>

元素必須保持向左浮動。

Answer 1

也許有額外的div試圖讓上下都在一起嗎？

<div id="up_down"> 
<div id="up"></div> 
<div id="down"></div></div> 
<div id="mid"></div> 
<div id="right"></div> 

你會改變你的CSS到：

up_down{ 
width: 33.3%; 
height: 200px; 
} 

#up { 
width: 100%; 
height: 50%; 
background: #CCCCCC; 
float: left; 
} 
#down { 
width: 100%; 
height: 50%; 
background: #999999; 
float: left; 
} 

Answer 2

您可以考慮簡單地將中間div的display屬性設置爲「inline-block」，而不是使用浮動工具。請記住，默認情況下，div元素具有塊顯示，這意味着即使寬度小於父寬度，它們也會佔用其父元素的整個寬度。另一方面，嵌入塊像拼圖塊一樣拼裝在一起，並且水平流動而不是垂直流動。

Answer 3

由於@isherwoord第一評論說，包裹＃DIV向上和DIV＃下來一起在另一個div forexample格號列

（我希望你不介意編寫HTML的方式HAML）。

div#column 
    div#up 
    div#down 

div#middle 
div#right 

Answer 4

如果你知道的高度/寬度只需將底本的頂部位置position:relative;top:-100px;把它拉回來了。

例子：

#up { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
} 
 
#down { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #999999; 
 
    float: left; 
 
    position:relative; 
 
    top:-100px; 
 
} 
 
#mid { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#right { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
}

<div id="up"></div> 
 
<div id="mid"></div> 
 
<div id="right"></div> 
 
<div id="down"></div>