使用CSS的响应式水平网格

我正在尝试使用高度相同但长度各不相同的响应式网格。这些箱子需要充满图片，保持正确的比例，而不会拉伸（例如图像尺寸：400x400,600x400,800x400，...）。使用CSS的响应式水平网格

我试了几件事情：

引导电网：工作正常，但只有当没有水平保证金，保证金将被视为额外的宽度和图像将得到不同的高度。
Flexbox：工作正常，但行高不一样。
其他css框架与bootstrap有相同的问题。

我正在寻找一个纯粹的CSS解决方案。

这可能吗？（其他方法或解决方案与实现Flexbox/CSS的框架问题）

enter image description here

来源

2015-01-04 user3231419

水平裕度使用保证金左/右，对不对？ – 2015-01-04 15:41:29

你有代码示例，看看你到目前为止？ – 2015-02-24 18:52:28

看这...

enter image description here

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

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

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

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

 
</body> 
 
</html>

来源

2015-02-25 06:44:02 swestphal

在完整浏览器中查看片段。您必须添加最小宽度才能让img不会进入下一行。 – swestphal 2015-02-25 06:51:41

使用CSS的响应式水平网格

回答

相关问题