使用CSS用兄弟元素填充空格

Question

我试图创建一系列图像，但我很难定位它们。

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

这就是我想要的方式：

现在就是这样：

最后，到目前为止我编码的是：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有人可以帮忙吗？

提前致谢！

Answer 1

添加浮动：右侧为430x800马赛克;

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

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

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

corse将其从内联样式中删除

Answer 2

我会使用弹性行和列来解决这个问题。调整了您的图像尺寸，以便所有内容排成一行

* {
  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>