Question

场合

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

问题

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

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

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

目前，当有两个类别时，它看起来像这样。

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

在这种情况下，我可以添加一个margin-top，但只要有一个类别，它就像这样：

它应该始终与FOOTER和最后一个类别之间的空间相同。

修改：

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

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

https://jsfiddle.net/k3ve49uj/

最后的结果是我需要的。即使只有一个类别，也应该坚持到底。我使用<br/>来模拟它。

很遗憾，我无法显示实际的HTML＆amp; CSS因为它适用于客户端。但是我以后可以应用这些更改。

信息

请不要处理我提供的代码，只是为了证明我需要的代码。基本上有一个容器＆amp;其中的所有元素必须从THE BOTTOM到TOP。不是相反。

段

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果您像这样更改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);
}

Answer 3

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

从下到上列出元素（但不是以相反的顺序）

场合

问题

信息

段

3 个答案: