Question

我将颜色块（带有bg颜色的div）添加到父div。每个父div可以有多个这些颜色块，它们显示在父级的右下角，最多三个到一行。

我的代码（下面）执行3种或更少颜色所需的颜色，但如果添加了第四种颜色，它会跳到下面的一行，在底行留下两个空白区域。我想要发生的是第四种颜色显示在上面一行，所以底线没有空白。

您可以在行动here中看到问题以及我希望发生的事情的硬编码示例。

<style>
.container {
    position: relative;
    width: 200px;
    height: 142px;
}

.colorSwatches {
   position: absolute;
   bottom: 0px;
   right: 0px;
   max-width: 100px;
   max-height:60px;
   text-align:right
}

.swatch {
    display: inline-block;
    width: 25px;
    margin: 2px;
    height: 25px;
    background-color: rgb(255, 0, 0);  ///or whatever
}
</style>


<div class="container">
  <div class="colorSwatches">
     <div class="swatch"></div>
     <div class="swatch"></div>
     <div class="swatch"></div>
     <div class="swatch"></div>
  </div>
</div>

感谢您的帮助。

Answer 1

我认为你可以通过一些 flexbox 魔法来实现这种布局：

使用.swatches prop

.colorSwatches

display: flex

然后到此容器和flex-wrap规则：flex-wrap: wrap-reverse，以便其中的子项将以flex-direction的相反方向换行到下一行。我认为默认为row。
最后，添加到容器justify-content: flex-end;，以便内部的项目开始在容器的末尾布局。

这是一个jsfiddle demo和几个资源：

从右下角堆叠div

1 个答案: