即使設定為1fr，img也不會占用網格容器的全寬

我正在嘗試創建一個書店頁面，我希望兩張卡片分別占據頁面的一半（間隙為 20 像素）。我已經將父級 .book-cards 設定為 1fr 1fr 并將 card-top 設定為 width: 100% ，這樣它將占據頁面一半的網格區域的 100%。

如果您運行代碼，卡片顯然不會占據頁面的一半。

.book-section-title {
    text-align: center;
    font-family: 'Recoleta', sans-serif;
    font-size: 35px;
}

.card-img {
    width: 90%;
    height: 90%;
    border-radius: 5px;
}

.card-top {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e3dcee;
    border-radius: 7px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:fit-content;
    height: 100%;
}

.book-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 20px
}

.book-title {
    text-align: center;
    width: 165px;
    color: #5a5a5a;
    font-family: 'Widy-Thin';
    font-size: 14px;
    color: black;
}

<div class="book-cards">
        <div class='card'>    
            <div class="card-top">
                <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
            </div> 
            <div class="card-bottom">
                    <p class="book-title">Think Life Like A Monk</p>
            </div>
        </div>    
        <div class='card'>    
            <div class="card-top" style="background-color: #f0edf5">
                <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
            </div> 
            <div class="card-bottom">
                
                <p class="book-title">Wonder</p>

            </div>
        </div>   

uj5u.com熱心網友回復：

洗掉。width: fit-content;_.card

.book-section-title {
  text-align: center;
  font-family: 'Recoleta', sans-serif;
  font-size: 35px;
}

.card-img {
  width: 90%;
  height: 90%;
  border-radius: 5px;
}

.card-top {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e3dcee;
  border-radius: 7px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.book-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 20px
}

.book-title {
  text-align: center;
  width: 165px;
  color: #5a5a5a;
  font-family: 'Widy-Thin';
  font-size: 14px;
  color: black;
}

<div class="book-cards">
  <div class='card'>
    <div class="card-top">
      <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
    </div>
    <div class="card-bottom">
      <p class="book-title">Think Life Like A Monk</p>
    </div>
  </div>
  <div class='card'>
    <div class="card-top" style="background-color: #f0edf5">
      <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
    </div>
    <div class="card-bottom">
      <p class="book-title">Wonder</p>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

.card-top,
card,
img {
  width: 100%;
}

<center>
  <div class="book-cards">
    <div class='card'>
      <div class="card-top">
        <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
      </div>
      <div class="card-bottom">
        <p class="book-title">Think Life Like A Monk</p>
      </div>
    </div>
    <div class='card'>
      <div class="card-top" style="background-color: #f0edf5">
        <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
      </div>
      <div class="card-bottom">

        <p class="book-title">Wonder</p>

      </div>
    </div>
  </div>
</center>

標籤：html css

上一篇：Positionabsoluteflexparent剪切flex項的box-shadow

下一篇：如何通過其父容器的形狀切斷子元素的可見性？