如何在彼此之上堆叠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。

附加是我的页面和样式表以及我想要实现的图像。

由于提前，

哪里像？ –

请添加一个[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/

答

您应该使用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%变焦：

答

以全页的片断。

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

答

两个变化：

.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/

如何在彼此之上堆叠Div

相关推荐