如何在彼此之上堆疊Div

我有一個類似菜鳥的快速問題。我用了才知道CSS，但已經多年沒有使用它後未.....如何在彼此之上堆疊Div

反正

我想堆疊在彼此的頂部兩個div。我的代碼的一部分在下面。

CSS：

.faq_left { 
    width: 134px; 
    height: 495px; 
    float: left; 
    background-color:red; 
} 

.faq_box_top { 
    width: 279px; 
    height: 200px; 
    float: top; 
    background-color:black; 
} 

.faq_box_bottom { 
    width: 279px; 
    height: 295px; 
    float: bottom; 
    background-color:green; 
} 

.faq_right { 
    width:783px; 
    height: 495px; 
    float: left; 
    background-color:yellow; 
}

HTML

<div class="faq_left"></div> 
<div class="faq_box_top"></div> 
<div class="faq_box_bottom"></div> 
<div class="faq_right"></div>

我想faq_left左側。

我想faq_box_top & faq_box_bottom位於中心，其中faq_box_top位於faq_box_bottom之上。

我想在右邊的faq_right。

附加是我的頁面和樣式表以及我想要實現的圖像。

由於提前，

來源

2015-10-16 tim987980

哪裏像？ –

請添加一個[jsfiddle]（http：//www,jsfiddle.net），這樣我們就可以看到代碼在這一刻做了什麼，然後從那裏開始尋找答案 – Simplicity

我不會使用絕對定位，因爲它可能很容易打破你的佈局。相反，我想包的頂部和底部的div另一個DIV中，像這樣：

<div class="faq_left"></div> 
<div class="faq_middle"> 
    <div class="faq_box_top"></div> 
    <div class="faq_box_bottom"></div> 
</div> 
<div class="faq_right"></div>

然後只需更改CSS一點點：

.faq_left { 
    width: 134px; 
    height: 495px; 
    float: left; 
    background-color:red; 
} 

.faq_middle { 
    width: 279px; 
    float: left; 
} 

.faq_box_top { 
    height: 200px; 
    background-color:black; 
} 

.faq_box_bottom { 
    height: 295px; 
    background-color:green; 
} 

.faq_right { 
    width:134px; 
    height: 495px; 
    float: left; 
    background-color:yellow; 
}

你可以看到在這裏運行：https://jsfiddle.net/u83dpf7t/

來源

2015-10-16 23:04:15

您應該使用position而不是float如你給出的值是錯誤的。我的方法是，將它們放置在頂部，左側，底部和右側，並根據左邊或頂部50%進行調整，給出負邊距的偏移量。

看看下面的代碼片段。

.faq_left, 
 
.faq_box_top, 
 
.faq_box_bottom, 
 
.faq_right { 
 
    position: absolute; 
 
} 
 

 
.faq_left { 
 
    width: 134px; 
 
    height: 495px; 
 
    left: 0; 
 
    top: 50%; 
 
    margin-top: -247px; 
 
    background-color:red; 
 
} 
 

 
.faq_box_top { 
 
    width: 279px; 
 
    height: 200px; 
 
    top: 0; 
 
    left: 50%; 
 
    margin-left: -139px; 
 
    background-color:black; 
 
} 
 

 
.faq_box_bottom { 
 
    width: 279px; 
 
    height: 295px; 
 
    left: 50%; 
 
    margin-left: -139px; 
 
    bottom: 0; 
 
    background-color:green; 
 
} 
 

 
.faq_right { 
 
    width:783px; 
 
    height: 495px; 
 
    right: 0; 
 
    top: 50%; 
 
    margin-top: -247px; 
 
    background-color:yellow; 
 
}

<div class="faq_left"></div> 
 
<div class="faq_box_top"></div> 
 
<div class="faq_box_bottom"></div> 
 
<div class="faq_right"></div>

這是它的外觀在33%變焦：

來源

2015-10-16 22:59:01

以全頁的片斷。

float只是：left，right或none。沒有：~~top~~或~~bottom~~。

右邊和左邊的框有display: inline-block，所以他們坐在一起。

頂部和底部的盒子有clear: both，所以沒有任何東西坐在他們旁邊。

頂部和底部框有margin: 0 auto，以便它們居中。

.faq_left { 
 
    width: 134px; 
 
    height: 495px; 
 
    float: left; 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
.faq_box_top { 
 
    width: 279px; 
 
    height: 200px; 
 
    background-color: black; 
 
    clear: both; 
 
    margin: 0 auto; 
 
} 
 
.faq_box_bottom { 
 
    width: 279px; 
 
    height: 295px; 
 
    background-color: green; 
 
    clear: both; 
 
    margin: 0 auto; 
 
} 
 
.faq_right { 
 
    width: 783px; 
 
    height: 495px; 
 
    float: left; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>33180711</title> 
 

 
</head> 
 

 
<body> 
 
    <div class="faq_box_top"></div> 
 
    <div class="faq_left"></div> 
 
    <div class="faq_right"></div> 
 
    <div class="faq_box_bottom"></div> 
 
</body> 
 

 
</html>

盒子的尺寸是奇怪...這是故意的嗎？目前還不清楚你想要什麼左右框？你想讓它們觸摸還是你想要它們之間的空間？如果你想要後者，然後改變右邊的框float: right

來源

2015-10-16 23:04:09 zer00ne

兩個變化：

.faq_right { 
    width:783px; 
    height: 495px; 
    float: right; 
    background-color:yellow; 
}

這應該是right而不是左邊，好嗎？

和重新排序：

<div class="faq_left"></div> 

<div class="faq_right"></div> 

<div class="faq_box_top"></div> 
<div class="faq_box_bottom"></div>

小提琴這裏：http://jsfiddle.net/pt8dcc1t/1/

來源

2015-10-16 23:05:41

如何在彼此之上堆疊Div

回答

相關問題