使用CSS使用同级元素填充空白空间

Question

我正在尝试创建图像的马赛克，但是我很难放置它们。

我正在使用的元素向左浮动，具有不同的大小，并遵循特定的显示顺序。 有没有办法只使用CSS？

这就是我想要的样子：

这就是现在的样子：

最后，到目前为止，我已经编码了：

 span { font-family: Arial; } .mosaic_wrapper { float: left; clear: both; overflow: hidden; width: 100%; max-width: 1075px; margin-bottom: 50px; } .mosaic_wrapper div { float: left; width: 100% } .mosaic_wrapper div .image_wrapper { width: 48%; height: 400px; float: left; position: relative; margin: 0.5% 0.5%; overflow: hidden; } .mosaic_wrapper div .image_wrapper a { width: 100%; height: 100%; float: left; } .mosaic_wrapper div .image_wrapper a:hover img { transform: scale(1.1); } .mosaic_wrapper div .image_wrapper a:hover span.bg { opacity: 0.5; } .mosaic_wrapper div .image_wrapper a img { float: left; width: 100%; height: 100%; transition: transform 0.4s ease-in-out; backface-visibility: hidden; filter: grayscale(0%); } .mosaic_wrapper div .image_wrapper a span.bg { background-image: linear-gradient(to bottom, #999999, #222222); opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; z-index: 5; display: block; transition: opacity 0.3s ease; } .mosaic_wrapper div .image_wrapper a div.text { color: #ffffff; position: absolute; font-size: 1.7rem; bottom: 0; z-index: 10; padding: 20px; box-sizing: border-box; width: 100%; } .mosaic_wrapper div .image_wrapper a div.text span { float: left; width: 100%; } .mosaic_wrapper div .image_wrapper a div.text span.parent { font-size: 14px; text-transform: uppercase; } .mosaic_wrapper div .image_wrapper a div.text span.dept { font-size: 50px; font-weight: bold; line-height: 1.1; } .mosaic_wrapper div .image_wrapper a div.text span.desc { font-size: 14px; line-height: 1.2; } 

 <div class="mosaic_wrapper"> <div> <div class="image_wrapper" style="width: 58%;"> <a href="#"> <img src="http://placehold.it/623x400"> <div class="text"> <span class="parent">Test</span> <span class="dept">Test</span> <span class="desc">Test</span> </div> <span class="bg"></span> </a> </div> <div class="image_wrapper" style="width: 40%;height: 800px;"> <a href="#"> <img src="http://placehold.it/430x800"> <div class="text"> <span class="parent">Test</span> <span class="dept">Test</span> <span class="desc">Test</span> </div> <span class="bg"></span> </a> </div> <div class="image_wrapper" style="width: 28%;"> <a href="#"> <img src="http://placehold.it/300x400"> <div class="text"> <span class="parent">Test</span> <span class="dept">Test</span> <span class="desc">Test</span> </div> <span class="bg"></span> </a> </div> <div class="image_wrapper" style="width: 29%;"> <a href="#"> <img src="http://placehold.it/300x400"> <div class="text"> <span class="parent">Test</span> <span class="dept">Test</span> <span class="desc">Test</span> </div> <span class="bg"></span> </a> </div> <div class="image_wrapper" style="width: 100%;"> <a href="#"> <img src="http://placehold.it/1075x400"> <div class="text"> <span class="parent">Test</span> <span class="dept">Test</span> <span class="desc">Test</span> </div> <span class="bg"></span> </a> </div> </div> </div> 

有人可以帮忙吗？

提前致谢！

Answer 1

在430x800马赛克上添加一个float：right；

<div class="image_wrapper" style="width: 40%;height: 800px;float:right">
  <a href="#">
    <img src="http://placehold.it/430x800">
    <div class="text">
      <span class="parent">Test</span>
      <span class="dept">Test</span>
      <span class="desc">Test</span>
    </div>
    <span class="bg"></span>
  </a>
</div>

或者，您可以向430x800马赛克添加id属性，例如id =“ rightMosaic”并为其创建以下样式：

.mosaic_wrapper div .image_wrapper#rightMosaic{
  float: right;
} 

并从内联样式中删除它

Answer 2

我将使用flex行和列进行布局。 稍微调整了图像尺寸，以便所有内容对齐

 * { margin:0;padding:0;box-sizing:border-box; } .flex { display: flex; } .col { flex-direction: column; } img { max-width: 100%; display: block; } 

 <div class="flex" style="margin: 0 0 12px;"> <div class="flex col" style="margin: 0 12px 0 0;"> <div style="margin: 0 0 12px 0;"> <img src="http://placehold.it/612x400"> </div> <div class="flex"> <div style="margin: 0 12px 0 0;"> <img src="http://placehold.it/300x400"> </div> <div> <img src="http://placehold.it/300x400"> </div> </div> </div> <div> <img src="http://placehold.it/430x812"> </div> </div> <div> <img src="http://placehold.it/1054x400"> </div>