从下到上列出元素（但不是倒序）

Question

情况

我有一个设计，其中 categories 显示在正方形 product 上。可以有一个 category 或最多 3 个 categories.

问题

设计要求类别从下到上列出。类别显示为 <div>category-1</div> 文本。每个类别都有 80px 的高度和自定义宽度（最大 200 像素）。

是否可以仅使用 CSS 并且至少适用于 IE9？

如果无法使用 CSS 解决方案，我可以使用 angular JS。

目前有 2 个类别时看起来像这样。

我需要让它看起来像这样：

我可以在那种情况下添加边距顶部，但只要只有 1 个类别，它就会看起来像这样：

FOOTER 和最后一个类别之间应该始终相同space。

编辑:

不确定是否重要，但最多有 3 个类别，最少有 1 个类别。

看来我还不够清楚所以我在jsfiddle上做了一个例子：

https://jsfiddle.net/k3ve49uj/

最后的结果就是我需要的。即使只有 1 个类别，它也应该贴在底部。我用 <br/> 来模拟那个。

很遗憾，我无法显示实际的 HTML & CSS，因为它是为客户工作的。但我稍后可以应用更改。

信息

请不要使用我提供的代码，它只是为了演示我需要什么。基本上有一个容器，其中的所有元素都必须从底部到顶部定位。反之则不然。

片段

.pr.product {
 width: 380px;
 height: 380px;
 background-image: url("http://unsplash.it/380/380?random&blur");
 margin: 30px;
 position: relative;
 color: #fff;
 text-shadow: 1px 1px 0px rgba(0,0,0,.5);
}
.product .headline {
 position: absolute;
 left: 20px;
 bottom: 60px;
 width: 75%;
}

.product .category_wrapper {
 position: absolute;
 right: 20px;
 width: 20%;
 bottom: 140px;
 background-color: rgba(0, 255, 0, .3);
 height: 60px;
 top: 255px;
}
.product footer {
 text-align: right;
 color: red;
 font-size: 18px;
 text-transform: uppercase;
 position: absolute;
 bottom: 20px;
 right: 20px;
}

<body>
  <h3>
  Looks good, but only if 3 categories are available.
  </h3>
  <div class="product">
    <div class="headline">
      <h1>Test headline</h1>
    </div>
    <div class="category_wrapper">
      <div class="category">category-1</div>
      <div class="category">category-2</div>
      <div class="category">category-3</div>
    </div>
    <footer>
      FOOTER
    </footer>
  </div>

  <hr/>
  <h3>
    Only 2 categories (they stick to the top)
    </h3>
  <div class="product">
    <div class="headline">
      <h1>Test headline</h1>
    </div>
    <div class="category_wrapper">
      <div class="category">category-1</div>
      <div class="category">category-2</div>

    </div>
    <footer>
      FOOTER
    </footer>
  </div>

  <hr/>
  <h3>
      Desired output if only 2 tags
    </h3>
  <div class="product">
    <div class="headline">
      <h1>Test headline</h1>
    </div>
    <div class="category_wrapper">
      <br/>
      <div class="category">category-1</div>
      <div class="category">category-2</div>
    </div>
    <footer>
      FOOTER
    </footer>
  </div>


</body>

Answer 1

这将完全符合您的要求。但我不确定它是否会与您正在使用的 CSS 一起使用而不观看它。试试这个或提供您的 CSS 作为列表和页脚，如果它不起作用的话。

#footer {
  margin-top: 20px;
  width: 100%;
  height: auto;
  color: red;
}

ul{
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  
}

<ul>
  <li>Category 1</li>
  <li>Category 2</li>
</ul>
<div id="footer">Footer</div>

更新

Check this fiddle 使用更新后的代码并告诉我。

只需要更新您的.product .category_wrapper如下

.product .category_wrapper {
            position: absolute;
            right: 20px;
            width: 20%;
            bottom: 60px;
            background-color: rgba(0, 255, 0, 0.3);
            height: auto;
        }

Answer 2

由于元素的数量可以在 1-4 之间变化，因此列表的高度实际上是可变的 - 尝试从样式表中的 category_wrapper 中删除 height 和 top 值.

Answer 3

如果你像这样改变你的CSS，它会按照你的要求去做。

.product .category_wrapper {
    position: absolute;
    right: 20px;
    width: 20%;
    bottom: 70px;
    height: auto;
}
.product .category_wrapper .category {
    background-color: rgba(0, 255, 0, .3);
}

从下到上列出元素（但不是倒序）

listing elements from bottom to top (but not in reverse order)

html

css

css-position

angularjs

情况

问题

信息

片段