suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum läuft ein untergeordnetes Raster mit einer festen Breite und einer maximalen Breite von 90 % über die Rasterspur hinaus?

Frage:

Meine Frage ist ganz einfach: Ich möchte wissen, warum das .header-Element seine Rasterspur überläuft, wenn es die Ansichtsfensterbreite von 1500 Pixel erreicht.

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>

Der Effekt, den ich möchte:

Meine Idee ist, die Breite des .header元素的宽度为1500像素。当空间不足时，.header-Elements auf 1500 Pixel festzulegen. Wenn der Platz knapp ist, sollte

90 % seiner Rasterspur belegen.

Was ich versucht habe:

width: min(1500px, 90%)并在.header元素中删除max-width，成功实现了这个效果，但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frIch habe diesen Effekt erfolgreich erreicht, indem ich width: min(1500px, 90%) festgelegt und max-width im

-Element gelöscht habe, aber ich weiß nicht genau, was passiert ist Was. Ich vermute, dass die Rasterspur ihre Breite anhand der Breite ihres Inhalts berechnet. Im Moment bin ich mir nicht sicher, was genau 1fr bedeutet.

Meine Gedanken:

Jeder sagt, Grid sei großartig, aber ich bekomme immer Probleme, wenn ich die Wärme von Flexbox verlasse. 🎜
P粉471207302P粉471207302232 Tage vor1538

Antworte allen(1)Ich werde antworten

  • P粉238433862

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

    使用90vw而不是90%似乎对此起作用

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

    Antwort
    0
  • StornierenAntwort