当我在 div 中添加任何内容时，我的 div 越来越大。我想保持 div 的宽度不发生变化和扩展。如何防止 div 在 CSS 网格布局中变大？
我刚刚添加了一个小段落，它正在扩展，但我想防止 div 扩展。而且我还想根据屏幕尺寸自动设置div的宽度。
<!DOCTYPE html>
<html>
<head>
<title>GTU Students-Care</title>
<link rel="icon" type="image/png" href="title.png">
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<!--bootstrap--------------------------------------------->
<!--
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
-->
<!--------------------------------------------------------->
<link href="https://fonts.googleapis.com/css?family=Assistant|Barlow|Dosis|Gothic+A1|Monoton|Open+Sans|Roboto" rel="stylesheet">
<style type="text/css">
header {
background-color: #cc66ff;
color: white;
padding: 35px;
}
#gtu-header-home {
text-align: center;
font-weight: lighter;
font-size: 4em;
font-family:'Barlow', sans-serif;
text-shadow: -1px 0px blue, 0px 1px blue, 1px 0px blue, 0px -1px blue;
}
#gtu-header-detail {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 25px;
}
#footer-copyright {
text-align: center;
font-size: 20px;
font-family: 'Barlow', sans-serif;
}
footer {
background-color:#ff9966;
padding: 25px;
}
ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
}
.navbar a{
text-decoration: none;
display: block;
color: white;
padding: 16px;
font-weight: lighter;
}
.navbar a:hover {
background-color: white;
color: gray;
}
.navbar li{
font-size: 26px;
font-family: 'Barlow', sans-serif;
display: inline-block;
}
#innerlist-1, #innerlist-2 {
display: none;
background-color: #f1f1f1;
position: absolute;
min-width: 4cm;
box-shadow: 3px 3px 10px -5px gray;
}
.innerlist a{
color: black;
padding: 0px;
padding: 5px;
}
.innerlist a:hover {
background-color: #ccc;
}
#sem:hover #innerlist-1{
display: block;
}
#branch:hover #innerlist-2 {
display: block;
}
#latest-posts {
font-weight: lighter;
margin: 0px;
padding: 5px;
text-align: center;
font-family: 'Assistant', sans-serif;
border: 3px solid gray;
display: block;
width: 6cm;
margin: auto;
background-color: gray;
color: white;
}
#site-about {
text-align: justify;
display: inline-block;
width: 33.33%;
font-size: 20px;
}
#site-about h1 {
text-align: center;
}
body {
background-color: #ceeddf;
}
#container {
min-height: 100px;
display: grid;
grid-gap: 15px;
grid-template-columns: auto auto auto auto;
padding: 15px;
}
#container > div {
background-color: white;
border: 2px solid gray;
height: 12cm;
}
#upload:after {
content: "";
display: table;
clear: both;
}
#main {
background-color: #ff9999;
}
#latest-post-title {
padding: 1cm;
}
</style>
</head>
<body>
<header>
<h1 id="gtu-header-home">GTU Students Care</h1>
<p id="gtu-header-detail">Tutorials | Question papers | Solution</p>
</header>
<ul class="navbar">
<li id="sem"><a href="#">Semester</a>
<div id="innerlist-1" class="innerlist">
<a href="#">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Forth</a>
</div>
</li>
<li id="branch"><a href="#">Branch</a>
<div id="innerlist-2" class="innerlist">
<a href="#">Computer</a>
<a href="#">Electronics</a>
<a href="#">Civil</a>
<a href="#">Mechanical</a>
</div>
</li>
<li><a href="about.html">About</a></li>
</ul>
<div id="main">
<div id="latest-post-title">
<h1 id="latest-posts">Latest Uploads</h1>
</div>
<div id="upload">
<div id="container">
<div id="con-1" class="con">
<p>Question paper</p>
</div>
<div id="con-2" class="con"></div>
<div id="con-3" class="con"></div>
<div id="con-4" class="con"></div>
<div id="con-5" class="con"></div>
<div id="con-6" class="con"></div>
<div id="con-7" class="con"></div>
<div id="con-8" class="con"></div>
<div id="con-9" class="con"></div>
</div>
</div>
</div>
<footer>
<div id="site-about">
<h1>About</h1>
<p></p>
</div>
<div>
<p id="footer-copyright">Copyright@ GTU Students Care</p>
</div>
</footer>
</body>
</html>
为#container 添加固定宽度的列，现在它们是自动的，所以它们的宽度根据内容调整
grid-template-columns: 1fr 1fr 1fr 1fr
这将设置宽度比 1:1:1:1
您可以尝试使用“溢出：隐藏；”，或者如果它是您想要的垂直滚动：
溢出-x：隐藏； 溢出-y：滚动； （或汽车）
同样的问题，以及一些没有帮助的建议，这对我有用。