响应水平网格与CSS

时间:2015-01-04 14:53:18

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

我试图制作一个响应式网格,其盒子的高度相同但长度各不相同。 这些盒子需要填充图片,保持正确的比例而不会拉伸(例如图像尺寸:400x400,600x400,800x400,......)。

我尝试了几件事:

  • Bootstrap网格:工作正常但只有在没有水平边距时,边距才会被视为额外宽度,图像将达到不同的高度。
  • Flexbox:工作正常,但行的高度不同。
  • 其他css框架与bootstrap有同样的问题。

我正在寻找纯CSS解决方案。

这可能吗? (针对flexbox / css-frameworks问题的其他方法或解决方案)

enter image description here

1 个答案:

答案 0 :(得分:0)

看看这个......

enter image description here

<!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>