html - 不能将 div 置于另一个 div 之下

Question

我正在尝试用我的基本知识为我的母亲制作一个网站。但是我已经尝试了很多东西，但我无法让它按照我想要的方式工作

现在是这样的:

这就是我想要的样子:

但不知何故我无法让它工作。 div 没有定位在我想要它定位的位置。

这是我的源代码: JsFiddle

关于这部分没有正确定位:

 <div class="wrapper_3">
    <div class="main_3">
        3
    </div>
 </div>

在此先感谢您的帮助!我真的无法让它工作。

Answer 1

将 float:left; 添加到 wrapper_1 和 wrapper_2

之后，使用position:relative;定位wrapper_2。

如果您需要有关语法的更多信息，请访问此链接。 CSS Position Property 这是您的新 CSS。

.wrapper_1 {    width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
    float:left;}


 .wrapper_2 {
      width: 25%;

      display: inline-block;
      position: absolute;
      margin-left: 16px;
      margin-top: 5%;
        float:left;
        position: relative;
        top: 50%;

    }