Question

我在一个有几个div的页面上流动（我使用弹性位置，使用行方向）结构很漂亮＆＃34;固定＆＃34;设定高度。一切都按照应有的方式流动，但我想知道是否有人知道填补空隙的方法（当然这不是该部分的行方向，所以这可能就是为什么它不起作用）

https://jsfiddle.net/benvanlooy/2z8b5tzw/6/

我希望6被置于5 ...（见下面的小提琴）

我认为使用纯粹的css是不可能的......但这就是我真正想要的。
我不想用javascript来解决这个问题（我知道Isotype等可以做到这些事情）

任何帮助将不胜感激

HTML

  <div class="post-wrapper">
    <div class="post">1</div>
  </div>

  <div class="post-wrapper">
    <div class="post">2</div>
  </div>

  <div class="post-wrapper fourth">
    <div class="post">3</div>
  </div>

  <div class="post-wrapper fourth">
    <div class="post">4</div>
  </div>

  <div class="post-wrapper">
    <div class="post">5</div>
  </div>

   <div class="post-wrapper">
    <div class="post">6</div>
  </div>

  <div class="post-wrapper">
    <div class="post">7</div>
  </div>

</div>

CSS

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .post-wrapper{
  padding: 10px;
  width: 50%;
  height: 200px;
  box-sizing: border-box;
}

.container .post-wrapper.fourth{
  width: 25%;
  height: 410px;
}

.container .post-wrapper .post{
  background-color: #cccccc;
  width: 100%;
  height: 100%;
}

Answer 1

除非您对HTML的创建方式有所限制，否则可以将div .post 5和6包装在一起。这样，您可以在包装器上应用 flex-direction：column ，将div 5和6放在另一个上面。

＆＃13;

.container .post-wrapper.col-dir{
  height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .post.inner {
  height: 185px;
}

＆＃13;

<div class="container">

      <div class="post-wrapper">
        <div class="post">1</div>
      </div>

      <div class="post-wrapper">
        <div class="post">2</div>
      </div>

      <div class="post-wrapper fourth">
        <div class="post">3</div>
      </div>

      <div class="post-wrapper fourth">
        <div class="post">4</div>
      </div>

      <div class="post-wrapper col-dir">
        <div class="post inner">5</div>
        <div class="post inner">6</div>
      </div>

      <div class="post-wrapper">
        <div class="post">7</div>
      </div>

      <div class="post-wrapper">
        <div class="post">8</div>
      </div>

</div>

＆＃13;

这是一个有效的jsfiddle： https://jsfiddle.net/valangar/z6whLjty/

如何使div填补空隙（弹性定位）

1 个答案: