如何在CSS中将div2添加到div1右侧底部[关闭]答案

【问题标题】：how to add div2 to div1 right side bottom in CSS [closed]如何在CSS中将div2添加到div1右侧底部[关闭]
【发布时间】：2021-02-18 22:30:38
【问题描述】：

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

【问题讨论】：

你可以使用弹性盒子
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： jquery css sass less

【解决方案1】：

对于这样的定位元素，我建议使用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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你需要使用绝对定位。

如果你的 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 绝对定位到容器，您还需要设置 width: fit-content 到容器，因为它将具有 div1 宽度

【讨论】：

嘿，您发布的代码会将 div2 与底线对齐，但会将其放在 div1 内，而不是放在其中。看看我的代码:)