我正在尝试根据其内容调整父容器的大小。目前，它使用百分比作为宽度。不幸的是，图像容器不会根据其内容调整大小。

有没有办法根据父容器的宽度（包括内容）调整子容器的大小，或者让父容器调整大小？或者子内容（即图像）应该是不同大小而不是固定大小？非常感谢。

JSFiddle 链接

I've been looking all over but can't seem to figure out if this is possible. I have a layout on which I would like to use Isotope's filtering feature, but at the same time I don't want to transform the position of the items. In other words, I don't want to use any of Isotope's layout modes. I'm hoping to use "position: relative" on the individual divs but Isotope overrides that.

Ideally, I'm thinking it would be great if the divs could just flow as they would without Isotope being involved, but Isotope's filtering could do something like just change the opacity of the divs. For example, clicking on "Dog" keeps all the .dog divs at 100% opacity and sets .cat and .squirrel to 0% opacity. Would something like this be possible??

In my search I found this thread which gave me hope by introducing me to "transformsEnabled: false" but I don't think it's quite what I need:

With transformsEnabled set to false, my layout works as I would hope in the default state, but it also prevents the Isotope filtering from happening…

Any suggestions? Am I hoping for the impossible? Thanks in advance for any help you can offer!

我已经在我的 Wordpress 循环中集成了一个 CSS 过渡效果（我也使用了 Masonry，也许这就是冲突所在）。动画播放了两次，而不仅仅是一次，这很烦人，因为我不知道如何让它顺利播放一次。我根据本教程使用了一些 js 脚本和 css3：http: //tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

这是具有双重动画的页面的链接： http ://crippslawtest.co.uk/?post_type=cripps_staff&Department=accounting

这是我的css3：

这是我的砌体JS：

}

这是我的内容区：

检查此站点并单击屏幕中间的查看按钮

当您单击查看按钮时，图像彼此重叠。

然后，如果您重新调整浏览器大小，它将根据我们的需要自动设置。

我们已尝试使用以下视图按钮单击重新加载

I've been fiddling with this for more than an hour now, I've also did some search and review some that was posted here but non of them was able to resolve my issue.

I have 5 divs and the third and forth div doesn't stack up as I was expecting, instead the last div stack on the third div.

http://jsbin.com/rajinabu

HTML

JS

I was expecting it to behave something like this,

我有点击时展开和收缩的 div。Masonry 库非常适合初始化页面。我遇到的问题是，通过 Masonry 的绝对定位和下面的指令，当 div 展开时，它们与下面的 div 重叠。我需要让扩展 div 下面的 div 向下移动以处理扩展。

我的来源是： http: //masonry.desandro.com/

和

https://github.com/passy/angular-masonry/blob/master/src/angular-masonry.js

嗨，下面是我得到的输出。SPECIALTIES是标题。让它在那里。

我需要将出现在标题 SPECIALTIES 之后的内容安排在 2 列中。

我用过http://masonry.desandro.com/。当我在 XSLT 上开发页面时，我无法使用在砌体上表示的 HTML 初始化。使用 Javascript 初始化时，该功能仅适用于第一部分，即仅适用于SPECIALTIES下的内容。我在一个页面中有更多像SPECIALTIES这样的部分。

有没有人想得到如下图所示的输出？

更新：我已经尝试过 jquery 初始化，它仅在我检查网页时适用于所有人：

这是代码：

查询初始化：

这是我的页面：http ://stage.ranchone.com/menu/index-revised.html

您可以在每个部分的查看项目链接上找到它谢谢

我在我的 RoR 项目中实施 Masonry 时遇到了一些麻烦。

我想我可以用当前网页更好地解释它：http: //sttorybox.herokuapp.com/

如您所见，如果您打开页面，砌体工作正常。但是，例如，您进入一个故事的单个页面（您必须登录-> user:test@test.com，pass:test），单击框中的标题（第一个框，它是由测试用户创建的） ，现在单击页面标题：顶部栏砌体中的 STTORYBOX 现在不起作用，我不知道为什么：/

这是我的 JS 代码：

我希望你们能帮助我。提前致谢。

我知道这些砌体问题往往非常具体和繁琐。这次我被卡住了，无法弄清楚为什么底行没有一起浮动成一行。

我得到的没有砖石（只是向左浮动）：

我用砖石得到什么：

我的期望：

HTML

CSS

JS

CodePen玩游戏

有人有想法吗？

我有网格大小的砖石和一个 50% 的 div。我也放了一个“10”的排水沟，但它似乎并没有相应地平衡盒子。

红色框与整个容器不对齐。.w2 红色框的宽度为 %49，以显示装订线（边距）。如果我将其设为 50%，则 div 将对齐，但排水沟将不会与其他 div 一样。

如何使用 grid-sizer 和 10 的装订线完美对齐 div？

在这里看我的小提琴......

这是我的代码：