我有以下盒子（文章）當(dāng)我嘗試調(diào)整頁面大小時，它變成這樣：我希望它在調(diào)整窗口大小時自動居中，以避免右側(cè)出現(xiàn)巨大間隙，但它需要采用與現(xiàn)有格式相同的格式?；旧现恍鑼⒄麄€組移動到中心，而不將各個框居中，因為我希望它們?nèi)鐖D所示向左浮動。編輯：這就是我所追求的：這是我當(dāng)前的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貢獻(xiàn)1810條經(jīng)驗 獲得超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貢獻(xiàn)1806條經(jīng)驗 獲得超5個贊
它沒有從左側(cè)包裹盒子，所以我使用 CSS 網(wǎng)格解決了它：
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; 用于將容器與盒子一起居中。這可行，但會使盒子稍微偏離中心并偏向右側(cè)。為了補償，我在右側(cè)添加了10pxpadding: 40px 10px 40px 40px內(nèi)邊距： 。這些值可能有所不同。
工作中的jsfiddle
- 2 回答
- 0 關(guān)注
- 208 瀏覽
添加回答
舉報
0/150
提交
取消