Pourquoi un enfant de grille avec une largeur fixe et une largeur maximale de 90 % déborde-t-il de la piste de la grille ?
P粉471207302
P粉471207302 2024-04-05 14:33:39
0
1
1576

Question :

Ma question est très simple, je veux savoir pourquoi l'élément .header déborde de sa grille lorsqu'il atteint la largeur de la fenêtre d'affichage de 1500 pixels.

Code :

* {
  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>

L'effet que je souhaite :

Mon idée est de faire en sorte que la largeur de l'élément .header元素的宽度为1500像素。当空间不足时,.header soit de 1500 pixels. Lorsque l'espace est faible,

devrait occuper 90 % de sa grille.

Ce que j'ai essayé :

width: min(1500px, 90%)并在.header元素中删除max-width,成功实现了这个效果,但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frJ'ai réussi à obtenir cet effet en définissant width: min(1500px, 90%) et en supprimant max-width dans l'élément

, mais je ne sais pas exactement ce qui s'est passé Quoi. Je suppose que la piste de grille calcule sa largeur en fonction de la largeur de son contenu. Pour le moment, je ne sais pas exactement ce que signifie 1fr.

Mes pensées :

Tout le monde dit que Grid est génial, mais j'ai toujours des ennuis lorsque je quitte la chaleur de Flexbox. 🎜
P粉471207302
P粉471207302

répondre à tous(1)
P粉238433862

Utiliser 90vw而不是90% semble fonctionner pour cela

*{
  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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal