Div的最高位置不為0%

我有一個父 div，里面有多個子 div，這些子 div 間隔開以適應主 div。中間的子 div 里面有多個 div，它們包含不同的資料。我已將中間 div 內的 div 分成中間 div 的左側和右側部分，現在左側已正確對齊，以使中間 div 具有正確的頂部定位和高度，但右側 div 沒有 0% 頂部定位并且沒有 100% 的高度。為了更容易識別，正確的 div 是具有內部 html 的USD 900. 我希望它的頂部為 0%，高度為 100%。我怎樣才能做到這一點？任何幫助表示贊賞。提前致謝。

.shelf2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 24%;
  left: 0%;
  width: 100%;
  background-color: #87CEEB;
}

.shelf2 .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 {
  width: 80%;
  height: auto;
  background-color: orange;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 .leftLevel2Items {
  position: relative;
  left: 0%;
  width: 85%;
  height: auto;
  background-color: gold;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: blue;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items p {
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: green;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items p {
  position: absolute;
  left: 0%;
  font-size: 1vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .rightLevel2Items {
  position: relative;
  top: 0%;
  left: 85%;
  width: 15%;
  height: 100%;
  background-color: pink;
}

.shelf2 .level2 .rightLevel2Items p {
  position: absolute;
  top: 0%;
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

<div class="shelf2">
  <div class="level1">

  </div>
  <div class="level2">
    <div class="leftLevel2Items">
      <div class="topLeftLevel2Items">
        <p>I.PHONE 11 PRO MAX 256GB COMPLETE BOX WITH ALL ACCESSORIES FOR SALE</p>
      </div>
      <div class="bottomLeftLevel2Items">
        <p>Posted 1 day ago</p>
      </div>
    </div>
    <div class="rightLevel2Items">
      <P>USD 900</P>
    </div>
  </div>
  <div class="level3">

  </div>
</div>

uj5u.com熱心網友回復：

left: 85%;從中洗掉.shelf2 .level2 .rightLevel2Items。然后display: flex;設定align-items: baseline;on .level2。

在我個人看來，我認為你可以通過不使用太多flex. Flex 很棒，但僅在需要它的專案上使用它時效果最好。

如果洗掉 上的absolute定位，您可以恢復粉紅色背景顏色.shelf2 .level2 .rightLevel2Items p。如果你走那條路，我會使用align-items: center;而不是基線。

.shelf2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 24%;
  left: 0%;
  width: 100%;
  background-color: #87CEEB;
}

.shelf2 .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 {
  width: 80%;
  height: auto;
  background-color: orange;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 .leftLevel2Items {
  position: relative;
  left: 0%;
  width: 85%;
  height: auto;
  background-color: gold;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: blue;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items p {
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: green;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items p {
  position: absolute;
  left: 0%;
  font-size: 1vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .rightLevel2Items {
  position: relative;
  top: 0%;
  width: 15%;
  height: 100%;
  background-color: pink;
}

.shelf2 .level2 .rightLevel2Items p {
  position: absolute;
  top: 0%;
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.level2 {
  display: flex;
  align-items: baseline;
}

<div class="shelf2">
  <div class="level1">

  </div>
  <div class="level2">
    <div class="leftLevel2Items">
      <div class="topLeftLevel2Items">
        <p>I.PHONE 11 PRO MAX 256GB COMPLETE BOX WITH ALL ACCESSORIES FOR SALE</p>
      </div>
      <div class="bottomLeftLevel2Items">
        <p>Posted 1 day ago</p>
      </div>
    </div>
    <div class="rightLevel2Items">
      <P>USD 900</P>
    </div>
  </div>
  <div class="level3">

  </div>
</div>

標籤：html css 弹性盒

上一篇：不知道哪里來的多余空間

下一篇：將TwitterBootstrap行內表單組向右對齊？