如何在CSS的div1右侧底部添加div2

问题描述

如何将div2添加到div1右侧底部？

解决方法

您能提供更多有关如何显示此信息的详细信息吗？

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

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

您需要使用绝对定位。

如果您的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
}

如果tou 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宽度

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

jquery less sass sass