如何在 CSS 中将 div2 添加到 div1 右侧底部

Question

如何将div2添加到div1右下角？

Answer 1

您能否详细说明您是如何尝试显示它的？

无论如何这是一个简单的例子：

.container {
padding: 20px;
}


#div1 {
  padding: 20px;
  width:60%;
  background:blue;
  float: left;
}

#div2 {
  width:40%;
  padding: 20px;
  background:red;
  float: right;
}

html:

  <div id="div1">
    <div class="green">Float Column 1</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque aliquid aspernatur sequi, perferendis beatae minus hic impedit, velit et dicta. Consequatur rem ipsum neque delectus eveniet sapiente ex quis quam.
  </div>
  
  <div id=div2>
    <div class="blue">Float Column 2</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio iure doloribus, fugiat eum blanditiis ipsam qui obcaecati facilis voluptatem minima, iste deserunt illum nobis aliquam. Assumenda totam aspernatur, et minima!
  </div>
  
</div>

Answer 2

你需要使用绝对定位。

如果你html是

<div class="div1">
  <div class="div2"></div>
</div>

你需要这个css

.div1 {
  position: relative;
  width: 60%;
  height: 500px;
}

div2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%
  height: 200px
}

如果你html是

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

你需要这个css

.container {
  width: fit-content;
  position: relative;
  margin: 0 auto;
}
.div1 {
  width: 60%;
  height: 500px;
}
.div2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%
  height: 200px
}

在第一个示例中，我注意到 div2 绝对定位到 div1，但在第二个示例中，div2 绝对定位到容器，您还需要设置宽度：fit-content 到容器，因为它将有 div1 宽度

Answer 3

对于这样的定位元素，我建议使用position 属性。对于响应速度，您可以使用 media queries。将第一个 div 设置为 relative 以便第二个 div 根据它定位，因为 absolute 定位元素根据最近定位的祖先元素定位。

PS：如果您有任何问题，请告诉我们:)

div {
  border: 1px solid;
}

.div1 {
  position: relative;
  width: 40vw;
  height: 50vh;
}

.div2 {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 30vw;
  height: 25vh;
}

<div class="div1">
  <div class="div2"></div>
</div>

如何在 CSS 中将 div2 添加到 div1 右侧底部

how to add div2 to div1 right side bottom in CSS

css

jquery

sass

less