1 answers

Votes: 0

Fragen und Antworten

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

P粉471207302 2024-04-05 14:33:39 Sicht 1987

CSS3

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;
}

    
      
        header start
        header end

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. 🎜

Ihre Antwort

einreichen

1 antwortet

使用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>

2024-04-06 12:19:12

einreichen