Question

我有这个当前代码：

CSS：

img
{
    max-width:15vw;
    max-height:15vh;
    position:relative;
    background-color:#67615d;
    display:inline-block;
    text-align:justify;
}

#container 
{
    width:80%;
    min-height:100vh;
    margin:0px;
    float:right;
    margin:0px; 
    overflow:hidden;
}

#navbar
{
 background-color:#67615d;
 width:20%;
 height:100vh;
 overflow:hidden;  
 position:fixed;
 float:left;
}



#content 
{
      width:100vw;
      min-height:100vh;
      margin:0px;
      padding:0px;
      overflow:hidden; 
      background-color:#9d948f;
}

HTML：

<html>
<body>
<div id="content">


<div id="navbar">
*stuff in the navbar*      
</div>


<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>

无论如何，将此作为我当前的代码（添加更多内容），它看起来像这样： http://i.imgur.com/9WTUNtj.jpg

这些照片只是随机截图，其他是随机图片（显然只是为了测试目的，真实的东西将有所有分辨率的照片）我离开谷歌。无论如何，我想要做的是自动调整图片，使它们都适合容器，同时大小不同。

http://i.stack.imgur.com/TQCwW.png

黑匣子是＆＃34;图片＆＃34;，这就是我想要做的但是我一直在搞乱，有没有人知道如何更改我的代码来显示这些图片？任何建议或答案将不胜感激：D！

谢谢：）

Answer 1

我会使用javascript砌体布局：

http://masonry.desandro.com/

按照文档进行操作即可轻松安装。

具有不同尺寸（分辨率）图片的容器全部装配在一起

1 个答案: