我使用CSS网格将2个div像这样并排放置：
我喜欢这样，但是...如果用户将宽度更改为更小的值，我的页面将变成这样：
我真的不喜欢图像那么小，所以我想知道如何使divs堆叠只有当图像最终是这样的。
下面是我目前的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Poppins&display=swap" rel="stylesheet">
<body>
<div class="header">
<button><img src="static/img/book.png" width="50px"></button>
<div class="on-right">
<button><img src="static/img/book.png" width="50px"></button>
<button><img src="static/img/calendar.png" width="50px"></button>
<button><img src="static/img/controller.png" width="50px"></button>
</div>
</div>
<div class="grid-container">
<div class="grid-child purple" style="padding-left: 25px;">
<div style="height: 100%">
<h1 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">My Website!</h1>
<h2 style="font-family: 'Poppins', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna fringilla urna porttitor rhoncus dolor purus non enim. Purus ut faucibus pulvinar elementum integer enim.</h2>
<h3 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">Download the iOS app for free today!</h3>
</div>
</div>
<div class="grid-child green">
<img src="static/img/phone.png" width="50%">
</div>
</div>
</body>
</html>body {
margin: 0;
}
.header {
top: 0;
padding: 20px;
background: #ffac1c;
color: white;
font-size: 30px;
}
.on-right {
float: right;
}
button {
border: none;
outline: none;
background: none;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 100px;
}
2条答案
按热度按时间pengsaosao1#
@媒体规则为此制定。
将
max-width调整为您喜欢的值。bfrts1fy2#
您可以尝试使用自动填充网格，以便它动态变化，如果它是较小的，例如：
grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));到您的“.grid-container”您可以编辑“800 px”部分并根据需要进行调整
“autofill”选项确保它在不改变项目宽度的情况下占用可用空间（改变项目宽度将是“auto-fit”），“minmax”指定最小和最大宽度，因此800 px将是它进入堆栈的位置，它占用“1fr”。您可以将“1fr”改为“0.7fr”以使其更小。