简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mengapakah kanak-kanak grid dengan lebar tetap dan lebar maksimum 90% melimpahi trek grid?
P粉471207302
P粉471207302 2024-04-05 14:33:39
0
1
1423

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粉471207302
P粉471207302

membalas semua(1)
P粉238433862
P粉2384338622024-04-06 12:19:12 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！