使用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>