使用顯示網格時的對齊和位置問題

我在下面的代碼中有 2 個父容器。第一個僅供參考，我希望我的第二個容器看起來像。兩者的區別是第一個我使用了絕對定位和彈性顯示，而第二個是網格顯示。我堅持的是理解如何將類.item1和位置類.item2一直居中，就像它在第一個父容器即類上的樣子.topAdCon。我的具體問題是 1）如何居中.item1 2）如何將.item2's位置一直設定到右側（右：0%） 3）在我剛剛設定的第一個父容器上top: 0%將它一直對齊到頂部，因為它具有絕對定位我如何將第二個父容器的定位設定在我想要的位置當前我正在使用 margin-top 進行頂部定位是要走的路還是什么正確的路？4）最后我如何設定第二個容器的高度，因為height它沒有像第一個容器那樣回應？

注意：我注釋掉了我為實作這些目標而嘗試過的事情，但它們不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topAdCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  width: 100%;
  height: 18%;
  background-color: pink;
}

.topAdCon .adCon {
  width: 40%;
  height: 100%;
}

.topAdCon .adCon img {
  width: 100%;
  height: 100%;
}

.topAdCon .sideInfo {
  display: flex;
  text-align: center;
  width: 17%;
  height: 100%;
  position: absolute;
  right: 0%;
  border: 1.5px solid #000000;
}

.topAdCon .sideInfo p {
  font-size: 0.9vw;
  margin: auto;
}

.wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  /*position: relative;
  top: 20%;*/
  margin-top: 20%;
  grid-template-columns: 40% 17%;
  width: 100%;
  height: 18%;
  /*height not responding*/
  background-color: gold;
}

.item1 {
  /*align-self: center;*/
  width: 100%;
  height: 100%;
}

.item1 img {
  width: 100%;
  height: 100%;
}

.item2 {
  display: flex;
  text-align: center;
  /*align-self: flex-end*/
  width: 100%;
  height: 100%;
  border: 1.5px solid #000000;
}

.item2 p {
  font-size: 1.5vw;
  margin: auto;
}

<div class="topAdCon">
  <div class="adCon">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="sideInfo">
    <p>this is test statement 1</p>
  </div>
</div>

<div class="wrapper">
  <div class="item1">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="item2">
    <p>this is test statement 2</p>
  </div>
</div>

uj5u.com熱心網友回復：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topAdCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  width: 100%;
  height: 18%;
  background-color: pink;
}

.topAdCon .adCon {
  width: 40%;
  height: 100%;
}

.topAdCon .adCon img {
  width: 100%;
  height: 100%;
}

.topAdCon .sideInfo {
  display: flex;
  text-align: center;
  width: 17%;
  height: 100%;
  position: absolute;
  right: 0%;
  border: 1.5px solid #000000;
}

.topAdCon .sideInfo p {
  font-size: 0.9vw;
  margin: auto;
}

.wrapper {
  display: grid;
  margin-top: 20%;
  grid-template-columns: 30% 40% 12% 18%;
  grid-template-areas: 'item item1 item2 item3';
  width: 100%;
  height: 18vh;
  background-color: gold;
}

.item1 {
  width: 100%;
  height: inherit;
}

.item1 img {
  width: 100%;
  height: 100%;
}

.item3 {
  display: flex;
  text-align: center;
  justify-content: end;
  width: 100%;
  height: inherit;
  border: 1.5px solid #000000;
}

.item3 p {
  font-size: 1.5vw;
  margin: auto;
}

<div class="topAdCon">
  <div class="adCon">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="sideInfo">
    <p>this is test statement 1</p>
  </div>
</div>

<div class="wrapper">
  <div class="item"></div>
  <div class="item1">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="item2"></div>
  <div class="item3">
    <p>this is test statement 2</p>
  </div>
</div>

標籤：html css

上一篇：在懸停具有相同類的1個物件時停止所有影片

下一篇：Flex不考慮邊距