html - 如何将 Div 堆叠在一起

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% 缩放时的样子: