html - 使用 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;
} 

当然，将它从内联样式中移除