将砌体风格的图像添加到网站的部分

时间:2017-06-01 15:33:43

标签: html css masonry

我一直试图在我的网站上添加一个砌砖图像部分。但是它没有正确对齐。它只是将图片堆叠在一起。我怎么能用css / html创建一个砌体部分?或者也许创建一个给出砌体效果的桌子?

我的HTML:

<div class="masonry">
   <div class="item">IMAGE GOES HERE</div>
   <div class="item">SECOND IMAGE </div>
   THIRD IMAGE
   <div class="item">FOURTH IMAGE</div>
</div>

我的CSS:

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

下图是我想要实现的目标: enter image description here

1 个答案:

答案 0 :(得分:1)

你走了:

&#13;
&#13;
...
System.out.println("Names : " + factory.getNames());
ScriptEngine engine = manager.getEngineByName(factory.getNames().get(0));
...
&#13;
#container {
  height: 100%;
  width: 100%;
}
#left > img:nth-of-type(1) {
  height: 25vh;
  width: 35vw;
}
#left > img:nth-of-type(2) {
  height: 60vh;
  width: 35vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 25vw;
  height: 60vh;
}
#top-right > img:nth-of-type(2) {
  width: 35vw;
  height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
  width: 40vw;
  height: 25vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 20vw;
  height: 25vh;
}
&#13;
&#13;
&#13;