Question

我有一个网格，里面有盒子，每个盒子大小相同，标记相同。

我尝试todo的是盒子填满页面的整个宽度，它们之间有均匀的间隙。我们的想法是，如果浏览器窗口移动，则框中的项目将重新开始。

我已经研究了各种方法，包括使用bootstrap 3中的网格系统，以及HERE

我也考虑过使用一个JS插件，就像Masonry一样，尽管所有的瓷砖尺寸都相同，但它的工作效果似乎有些过分。

目前我几乎在这里工作：http://jsfiddle.net/3xshcn7p/

这种当前方法的唯一问题是，如果浏览器窗口是＆lt; 719px但是＆gt; 481，它将仅显示2个框并在右侧留下一个大的空白区域。

当屏幕不足以支持每行下一个数量的框时，所有框之间都会出现同样的问题。

如果这是纯粹使用css可以实现的，还是必须使用js的任何想法？

Answer 1

您可以使用flexbox方法来解决问题。

如果在布局的所有元素周围需要偶数空间，则使用

justify-content: space-around。

布局的元素之间的空间需要
justify-content: space-between。

＆＃13;
＆＃13;
body { box-sizing: border-box; height: 100%; background: #336633; } .wrapper { display: flex; flex-flow: row wrap; justify-content: space-around; } .box { width: 200px; height: 250px; background: white; float: left; margin: 20px; }
＆＃13;
<div class="wrapper"> <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 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 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 class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 
＆＃13;
＆＃13;
＆＃13;

Answer 2

尝试将text-align: center;添加到body元素，然后将float: left;更改为display: inline-block;。

<强> E.g。

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}

.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

这是JsFiddle link。

更新：我也回答了类似的问题。 Centre Multiple Responsive Divs Using CSS / JQUERY / HTML

希望它有所帮助。

Answer 3

Flexbox可以做到这一点，

Jsfiddle Demo

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}
.wrapper {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap: wrap;
}
.box {
    width: 200px;
    height: 250px;
    background: white;
    margin: 20px;
}

Answer 4

如果要填充整个宽度，则1.保持.box宽度固定为200px，然后可以居中，或者2.给它们一个灵活的宽度。这里还有一个解决方案，具有灵活的宽度和灵活的边距，使用媒体查询。

<strong class="logo">
<?php
if (is_user_logged_in())
    echo '<a href="http://test/register/">';
else
    echo '<a href="'.home_url().'">';
?>

<img id="logo_img" title="<?php bloginfo('name'); ?>" src="<?php echo $logo_path; ?>" alt="<?php bloginfo('name'); ?>">

Answer 5

您可以使用这些框的宽度和边距的相对值。例如width: 30% / width: 30vw;。

.box {
    width: 30vw;
    margin: 1vw;
    height: 250px;
    background: white;
    float: left;
}

http://jsfiddle.net/3xshcn7p/3/

Answer 6

我会使用css列。像这样：

{"html": "<hr>a<br>"}

如果窗口变小，则列数会减少。这是css-tricks.com的CodePen

http://codepen.io/katydecorah/pen/0cef950304c03248935b3b821e8b7cec

瓦片的响应网格均匀间隔 - 纯css是否可能？

6 个答案: