固定宽度可变高度网格css [英] fixed width variable height grid css

问题描述

如何在网格布局中实现固定宽度和可变高度，就像 www.pinterest.com 首页布局。我认为他们使用Javascript。只是想知道是否有其他方法。简单地使用 float：left 将无法工作。感谢任何帮助。

How can we achieve the fixed width and variable height in a grid layout, exactly like www.pinterest.com homepage layout. I think they are using Javascript. just wondering whether there are other approaches. simply using the float:left will not work. thanks for any help.

推荐答案

最简单的选择是使用 jQuery Masonry 插件。

The easiest option is to use the jQuery Masonry plugin.

如果你想通过CSS做，你必须浮动大，列，然后在其中添加您的可变高度元素。

If you want to do it via CSS only, you have to float large, equal width columns and then add your variable height elements within them.

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS看起来像这样：

And the CSS would look like so:

.parent {
  float: left;
  width: 200px; /* adjust as needed */
}

.child {
  /* these are variable height */
}

这篇关于固定宽度可变高度网格css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！