我有以下盒子（文章）当我尝试调整页面大小时，它变成这样：我希望它在调整窗口大小时自动居中，以避免右侧出现巨大间隙，但它需要采用与现有格式相同的格式。基本上只需将整个组移动到中心，而不将各个框居中，因为我希望它们如图所示向左浮动。编辑：这就是我所追求的：这是我当前的CSS：* { margin: 0; padding: 0;}html, body { height: 100%;}.container { width: 90%; height: 100%; overflow: hidden; background: skyblue; margin: auto; padding: 20px;}.container article { float: left; width: 250px; height: 250px; background: blue; margin: 25px}和我的html：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Shop</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> </div> </body></html>
2 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
使用灵活性，卢克
display: flex;
flex-wrap: wrap;
justify-content: center;
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
width: 90%;
height: 100%;
overflow: hidden;
background: skyblue;
margin: auto;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container article {
width: 250px;
height: 250px;
background: blue;
margin: 25px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
</div>
</body>
</html>
忽然笑
TA贡献1806条经验 获得超5个赞
它没有从左侧包裹盒子，所以我使用 CSS 网格解决了它：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
</div>
</body>
</html>
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 40px;
justify-content: center;
padding: 40px 10px 40px 40px;
background-color: #2196F3;
}
.grid-item {
width: 200px;
height: 200px;
background-color: #FFFFFF;
font-size: 30px;
text-align: left;
}
笔记：
grid-template-columns: repeat(auto-fill, 200px);200px是盒子的宽度。justify-content: center; 用于将容器与盒子一起居中。这可行，但会使盒子稍微偏离中心并偏向右侧。为了补偿，我在右侧添加了10pxpadding: 40px 10px 40px 40px内边距： 。这些值可能有所不同。
工作中的jsfiddle
- 2 回答
- 0 关注
- 155 浏览
添加回答
举报
0/150
提交
取消