如何将Divs叠加在一起

Question

我有一个快速的菜鸟问题。 我以前认识CSS，但多年后没有用过它.....

无论如何，

我试图将两个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。

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

提前致谢，

Answer 1

你应该使用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%缩放的外观：

Answer 2

查看整页中的代码段。

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

Answer 3

我不会使用绝对定位，因为它可能很容易打破你的布局。 相反，我会将顶部和底部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/

Answer 4

两个变化：

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

如何将Divs叠加在一起

问题描述

4 个解决方案

解决方案1
3 2015-10-16 22:59:01

解决方案2
1 2015-10-16 23:04:09

解决方案3
0 已采纳 2015-10-16 23:04:15

解决方案4
0 2015-10-16 23:05:41

如何将Divs叠加在一起

问题描述

4 个解决方案

解决方案1 3 2015-10-16 22:59:01

解决方案2 1 2015-10-16 23:04:09

解决方案3 0 已采纳 2015-10-16 23:04:15

解决方案4 0 2015-10-16 23:05:41

解决方案1
3 2015-10-16 22:59:01

解决方案2
1 2015-10-16 23:04:09

解决方案3
0 已采纳 2015-10-16 23:04:15

解决方案4
0 2015-10-16 23:05:41