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>
Meine Idee ist, die Breite des .header元素的宽度为1500像素。当空间不足时，.header-Elements auf 1500 Pixel festzulegen. Wenn der Platz knapp ist, sollte
width: min(1500px, 90%)并在.header元素中删除max-width，成功实现了这个效果，但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frIch habe diesen Effekt erfolgreich erreicht, indem ich width: min(1500px, 90%) festgelegt und max-width im
1fr bedeutet. Jeder sagt, Grid sei großartig, aber ich bekomme immer Probleme, wenn ich die Wärme von Flexbox verlasse. 🎜
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
使用
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>