問題

我有兩個div(div1和div2)並排,我想在div2下放置第三個div(div3).

我已經嘗試將差值新增到div3以嘗試將其排序,但div1寬度是動態的.我也嘗試將div3浮動到右邊,但是內容太遠了,並且不能像上面的影象一樣在div2的開始

 .row {
  display: flex;
}

.div1 {
  margin-right: 1em;
} 
 <div class="row">

  <div class="div1">
    <p> some content with unknown width</p>
  </div>

  <div class="div2">
    <p> some content </p>
  </div>

</div>

<div class="div3">
  <p> some content that should be under div2 </p>
</div> 

預設行為是div3在div1下.我試圖將div3放在div 2下面

  最佳答案

您可以使用以下方法執行此操作:

     .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    
    .div {
      flex-basis: 50%;
      min-height: 100px;
    }
    
    .div1 {
      background: red;
    }
    .div2 {
      background: blue;
    }
    .div3 {
      background: aqua;
    } 
 <div class="wrapper">
  <div class="div div1">div1</div>
  <div class="div div2">div2</div>
  <div class="div div3">div3</div>
</div> 

這是一個 codepan

  相同標籤的其他問題

htmlcss