gpt4 book ai didi

html - 固定尺寸盒子的 CSS 流体网格

转载 作者:太空宇宙 更新时间:2023-11-04 14:19:04 27 4
gpt4 key购买 nike

到目前为止,我有一个由大小相等的框组成的流动网格。在屏幕宽度为 800 像素或更大时,屏幕中央有两行四个蓝色框,as shown here.代码如下:

<style type="text/css">
body {width:100%; min-height:100%;}

#content {width:100%; max-width:800px; margin:0 auto;}

.box { float: left; display: table; height: 180px;
width: 180px; margin:10px; background-color:blue;}
</style>

<body>
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>

随着屏幕宽度的减小,框保持相同大小,每行的框数减少,并且它们下降到更多行。所有这一切正是我想要的。唯一的问题是随着屏幕宽度的减小,框会左对齐。

我希望剩余的行居中。谁能帮忙?

最佳答案

一种方法是:

  • 将 .box 上的显示更改为显示:inline-block;而不是表格。
  • 移除 .box 上的 float:left
  • 将 text-align:center 添加到 #content div。

示例 - http://jsfiddle.net/QxhUs/3/

CSS

#content {
width:100%;
max-width:800px;
margin:0 auto;
text-align:center;
}

.box {

display: inline-block;
height: 170px;
width: 170px;
margin:10px;
background-color:blue;
}

关于html - 固定尺寸盒子的 CSS 流体网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17040187/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com