cari

Rumah  >  Soal Jawab  >  teks badan

Mengapakah kanak-kanak grid dengan lebar tetap dan lebar maksimum 90% melimpahi trek grid?

Soalan:

Soalan saya sangat mudah, saya ingin tahu mengapa elemen .header melimpahi trek gridnya apabila ia mencapai lebar paparan 1500 piksel.

Kod: 

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

body {
  background: #6e28d9;
  color: white;
}

.container {
  display: grid;
  grid-template-areas: 'header';
  grid-template-columns: 1fr;
  background-color: rgba(255, 255, 255, 0.2);
}

.header {
  display: flex;
  justify-content: space-between;
  grid-area: header;
  width: 1500px;
  max-width: 90%;
  margin: 0 auto;
}
<body>
    <div class="container">
      <div class="header">
        <div class="header-start">header start</div>
        <div class="header-end">header end</div>
      </div>
    </div>
  </body>

Kesan yang saya mahukan:

Idea saya adalah untuk menjadikan lebar elemen .header元素的宽度为1500像素。当空间不足时，.header 1500 piksel. Apabila ruang rendah,

sepatutnya menduduki 90% daripada trek gridnya.

Apa yang saya cuba:

width: min(1500px, 90%)并在.header元素中删除max-width，成功实现了这个效果，但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frSaya berjaya mencapai kesan ini dengan menetapkan width: min(1500px, 90%) dan memadamkan max-width dalam elemen

, tetapi saya tidak tahu dengan tepat apa yang berlaku Apa. Saya rasa trek grid mengira lebarnya berdasarkan lebar kandungannya. Pada masa ini saya tidak pasti apa sebenarnya maksud 1fr.

Pemikiran saya:

Semua orang berkata Grid hebat, tetapi saya sentiasa menghadapi masalah apabila meninggalkan kehangatan Flexbox. 🎜
P粉471207302P粉471207302232 hari yang lalu1540

membalas semua(1)saya akan balas

  • P粉238433862

    P粉2384338622024-04-06 12:19:12

    Menggunakan 90vw而不是90% nampaknya berkesan untuk ini 

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

body {
  background: #6e28d9;
  color: white;
}

.container{
  display: grid;
  grid-template-areas: 'header';
  grid-template-columns: 1fr;
  background-color: rgba(255, 255, 255, 0.2);
}

.header{
  display: flex;
  justify-content: space-between;
  grid-area: header;
  width: 1500px;
  max-width: 90vw;
  margin: 0 auto;

  border: 1px solid red; /*Added just to visualize the exact width*/
}
    <div class="container">
  <div class="header">
    <div class="header-start">header start</div>
    <div class="header-end">header end</div>
  </div>
</div>

    balas
    0
  • Batalbalas