CSS两列具有已知子项宽度 [英] CSS two columns with known children width
问题描述
我创建了一些代码，用于显示具有不同高度的框（高度将来自内部图片）。
I creating some code for showing box with diffrent heights (height will be from images inside).
在此示例中完美工作： http://jsfiddle.net/GSnfG/
In this example works perfectly: http://jsfiddle.net/GSnfG/
...但是当我编辑一些高度（未来 - 图片的高度），此处：框3设置为高度100px ，结果不能很好。
...but when i edit some height (in future - height of image), here: box 3 set to height 100px, the results doesn't work good.
如何准备CSS代码来创建两列？
How prepare CSS code for creating something like two columns?
使用表，我也不想使用jquery或其他js
这是可能吗？
I cannot use tables, also i don't want use jquery or other js It is possible?
推荐答案
不，
在某些情况下，您可以在一般情况中添加wrapper div s，但是某些元素大小的组合会使得这看起来很糟糕，例如： http://jsfiddle.net/suaaK/3/ - 在那个演示中，它可能会更好，如果框6是在框3下。更多（和更多不同大小）的元素
In some cases, you can add wrapper divs for each separate column, but some combinations of element size will make this look bad, for example: http://jsfiddle.net/suaaK/3/ - in that demo, it would probably be better if Box 6 was under Box 3. The more (and more differently sized) elements you have, the more uneven the columns can become.
查看这个答案以比较候选技术，显示它们不工作，还显示客户端包含服务器端代码的解决方案部分：
See this answer for a comparison of the candidate techniques, showing that they don't work, and also showing the client-side portion of the solution involving server-side code:
- CSS Floating Divs At Variable Heights
如果您愿意使用JavaScript + jQuery，则应该使用 jQuery Masonry 。
If you're willing to use JavaScript+jQuery, you should use jQuery Masonry.
还有一个原始的JavaScript版本： Vanilla Masonry
There's also a raw JavaScript version: Vanilla Masonry
演示：
- http://desandro.com/demo/masonry/docs/filtering.html
- http：// desandro .com / demo / masonry / docs / animating-jquery.html
- http://desandro.com/demo/masonry/docs/appending.html
- http://desandro.com/demo/masonry/docs/filtering.html
- http://desandro.com/demo/masonry/docs/animating-jquery.html
- http://desandro.com/demo/masonry/docs/appending.html
这篇关于CSS两列具有已知子项宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
