带有 CSS 的响应式水平网格答案

【问题标题】：Responsive horizontal grid with CSS带有 CSS 的响应式水平网格
【发布时间】：2015-03-02 05:39:52
【问题描述】：

我正在尝试使用高度相同但长度不同的框制作一个响应式网格。这些框需要填充保持正确比例而不被拉伸的图片（示例图片尺寸：400x400、600x400、800x400...）。

我尝试了几件事：

引导网格：工作正常，但只有在没有水平边距时，边距才会被视为额外宽度，并且图像会获得不同的高度。
Flexbox：也可以正常工作，但行的高度不同。
其他 css 框架也存在与引导程序相同的问题。

我想要一个纯 CSS 解决方案。

这可能吗？（flexbox/css-frameworks问题的其他方法或解决方案）

【问题讨论】：

使用 margin-left/right 可以做水平边距，对吧？
你有一个代码示例来看看你到目前为止有什么吗？

标签： css twitter-bootstrap responsive-design grid flexbox

【解决方案1】：

看看这个……

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	
	.container {
	text-align: justify;
	}
	.container > div {
	display: inline-block;
	vertical-align: top;
	*display: inline;/*for ie*/
	zoom: 1;
	}

	.container:after {
	content: "";
	width: 100%;
	display: inline-block;
    }

</style>
</head>
<body>

<div class="container">

	<div><img src="http://placehold.it/100x100&text=placehold.it+rocks!/"></div>
	<div><img src="http://placehold.it/50x100&text=placehold.it+rocks!/"></div>
	<div><img src="http://placehold.it/200x100&text=placehold.it+rocks!/"></div>
	<div><img src="http://placehold.it/150x100&text=placehold.it+rocks!/"></div>
</div>		

</body>
</html>

【讨论】：

在完整浏览器中查看 sn-p。您必须添加 min-width 以使 img 不会进入下一行。