如何将Divs叠加在一起
[英]How to Stack Divs on top of each other
问题描述
I have a quick rookie-like question. 
我有一个快速的菜鸟问题。 I used to know CSS, but didn't after having not used it in years..... 我以前认识CSS，但多年后没有用过它.....
Anyway, 无论如何，
I'm trying to stack two divs on top of each other. 我试图将两个div叠加在一起。 A portion of my code is below. 我的部分代码如下。
CSS: 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 HTML
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
I would like faq_left on the left. 我想在左边的faq_left。
I would like faq_box_top & faq_box_bottom to be in the center, where faq_box_top is above faq_box_bottom. 我希望faq_box_top和faq_box_bottom位于中心，其中faq_box_top位于faq_box_bottom之上。
I would like faq_right on the right. 我想在右边的faq_right。
Attached is my page and style sheet along with an image of what I am trying to achieve. 随附的是我的页面和样式表以及我想要实现的图像。
Thanks in advance, 提前致谢，
4 个解决方案
解决方案1
3 2015-10-16 22:59:01
You should use position instead of float as the values you have given is wrong. 你应该使用position而不是float因为你给出的值是错误的。 My way is, to position them in top, left, bottom and right, with adjusting according to the left or top 50% by giving the offset in negative margins. 我的方法是，将它们放在顶部，左侧，底部和右侧，通过给出负边距偏移量，根据左侧或顶部50%进行调整。
Have a look at the below snippet. 看看下面的代码片段。
.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>
This is how it looks in 33% zoom: 这是33%缩放的外观：
解决方案2
1 2015-10-16 23:04:09
View the snippet in Full Page. 查看整页中的代码段。
float is only: left , right , or none . float只是： left ， right或none 。 There isn't a: 没有： or top 要么 . bottom 。
Right and left boxes have display: inline-block so that they sit next to each other. 左右框有display: inline-block使它们彼此相邻。
Top and bottom boxes have clear: both so that there is nothing sitting next to them. 顶部和底部的盒子clear: both没有坐在它们旁边。
Top and bottom boxes have margin: 0 auto so that they are centered. 顶部和底部框具有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>
The dimensions of the boxes are odd... is this intentional? 盒子的尺寸很奇怪......这是故意的吗？ It's unclear what you wanted with the left and right boxes...did you want them touching or did you want a space between them? 目前还不清楚你想要的左右两个盒子......你想要它们触摸还是你想要它们之间的空间？ If you desire the latter then change the right box to float: right 如果您需要后者，则将右侧框改为float: right
解决方案3
0 已采纳 2015-10-16 23:04:15
I wouldn't use absolute positioning since it may easily break your layout. 我不会使用绝对定位，因为它可能很容易打破你的布局。 Instead I would wrap the top and bottom divs inside another div, like this: 相反，我会将顶部和底部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>
And then just change the CSS a little bit: 然后只需更改一下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;
}
You can see it running here: https://jsfiddle.net/u83dpf7t/ 你可以看到它在这里运行： https ： //jsfiddle.net/u83dpf7t/
解决方案4
0 2015-10-16 23:05:41
two changes: 两个变化：
.faq_right {
width:783px;
height: 495px;
float: right;
background-color:yellow;
}
That should be right instead of left, well? 这应该是right而不是左，好吧？
and re-order: 并重新订购：
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
fiddle here: http://jsfiddle.net/pt8dcc1t/1/ 在这里小提琴： http ： //jsfiddle.net/pt8dcc1t/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.