html - Div 位于另一个 div 的一 Angular

Question

使用这样的代码，我可以将 div2 放在 div1 的右下角，HTML:

        <div id="div1">
            <p>text</p>
            <p>text2</p>
            <div id="div2">div2</div>
        </div>

CSS:

        #div1 {
            background: green;
            width: 100px;
            border: 2px solid green;
            position: relative;
        }

        #div2 {
            background: red;
            width: 50px;
            border: 2px solid red;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

但是我怎样才能把 div2 放在这样的 Angular 落:

Answer 1

这个问题有一个非常简单的解决方案。首先，从 #div2 中删除 position: absolute。

然后，您在 #div1 上指定 95px 的固定 height。

之后，您只需将 #div2 上的 margin-left 设置为 70px。

这是一个工作片段。

#div1 {
  background: green;
  width: 100px;
  height: 95px;
  border: 2px solid green;
  position: relative;
}

#div2 {
  background: red;
  width: 50px;
  border: 2px solid red;
  margin-left: 70px;
}

<div id="div1">
  <p>text</p>
  <p>text2</p>
  <div id="div2">div2</div>
</div>