不使用JS将文本的最小高度设置为最大文本的高度

时间：2019-02-18 13:01:58

标签： html css

我有一个多列<ul>的无序列表<li>。

enter image description here

如您所见，橙色按钮并不总是与其余按钮对齐。它应该看起来像这样：

enter image description here

文本容器的类别为crosssell-product-name。

如何在不使用javascript的情况下将min-height设置为文本最大的项目（第一个…）？

我还尝试在height: auto !important上应用.crosssell-product-name，但这没有用。

也欢迎不需要JS的替代解决方案。谢谢！

HTML（单击完整视图）：

.item {
    width: 285px;
    float: left;
    display: block;
}
<div class="crosssell-products products-grid flexslider large-icons" id="crosssell-products-list">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides last odd" style="width: 800%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="item">
                <div class="item-inner">
                    <div class="crosssell-product-image">
                        <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                    </div>
                    <div class="crosssell-product-shop">
                        <div class="reviews-wrap"></div>
                        <h3 class="crosssell-product-name">
                            <a href="">AAAAA AAAAAAAA AAAAAAAA AAAAA AAA</a>
                        </h3>
                        <div class="actions clearfix">
                            <button class="button btn-cart" type="button">In den Warenkorb</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="item-inner">
                    <div class="crosssell-product-image">
                        <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                    </div>
                    <div class="crosssell-product-shop">
                        <div class="reviews-wrap"></div>
                        <h3 class="crosssell-product-name">
                            <a href="">AAAAA AAAAA</a>
                        </h3>
                        <div class="actions clearfix">
                            <button class="button btn-cart" type="button">In den Warenkorb</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="item-inner">
                    <div class="crosssell-product-image">
                        <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                    </div>
                    <div class="crosssell-product-shop">
                        <div class="reviews-wrap"></div>
                        <h3 class="crosssell-product-name">
                            <a href="">AAAAA AAAAAAAA</a>
                        </h3>
                        <div class="actions clearfix">
                            <button class="button btn-cart" type="button">In den Warenkorb</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="item-inner">
                    <div class="crosssell-product-image">
                        <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                    </div>
                    <div class="crosssell-product-shop">
                        <div class="reviews-wrap"></div>
                        <h3 class="crosssell-product-name">
                            <a href="">AAAAA AAAAAAAA AAAAAAAA</a>
                        </h3>
                        <div class="actions clearfix">
                            <button class="button btn-cart" type="button">In den Warenkorb</button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

2 个答案:

答案 0 :(得分：1)

第一：

在您的display: flex;上添加<ul>。

第二个：

在您的课程.actions上，将position: absolute;与bottom: -10px;相加。

我希望它将对您有帮助

.item {
      width: 285px;
      float: left;
      display: block;
  }
    
  .slides {
      display: flex;
  }

  .actions {

      position: absolute;
      bottom: -10px;
  }
<div class="crosssell-products products-grid flexslider large-icons" id="crosssell-products-list">
        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides last odd" style="width: 800%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                <li class="item">
                    <div class="item-inner">
                        <div class="crosssell-product-image">
                            <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                        </div>
                        <div class="crosssell-product-shop">
                            <div class="reviews-wrap"></div>
                            <h3 class="crosssell-product-name">
                                <a href="">AAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAA AAA</a>
                            </h3>
                            <div class="actions clearfix">
                                <button class="button btn-cart" type="button">In den Warenkorb</button>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="item-inner">
                        <div class="crosssell-product-image">
                            <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                        </div>
                        <div class="crosssell-product-shop">
                            <div class="reviews-wrap"></div>
                            <h3 class="crosssell-product-name">
                                <a href="">AAAAA AAAAA</a>
                            </h3>
                            <div class="actions clearfix">
                                <button class="button btn-cart" type="button">In den Warenkorb</button>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="item-inner">
                        <div class="crosssell-product-image">
                            <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                        </div>
                        <div class="crosssell-product-shop">
                            <div class="reviews-wrap"></div>
                            <h3 class="crosssell-product-name">
                                <a href="">AAAAA AAAAAAAA</a>
                            </h3>
                            <div class="actions clearfix">
                                <button class="button btn-cart" type="button">In den Warenkorb</button>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="item-inner">
                        <div class="crosssell-product-image">
                            <a href=""><img alt="..." src="https://via.placeholder.com/200x285"></a>
                        </div>
                        <div class="crosssell-product-shop">
                            <div class="reviews-wrap"></div>
                            <h3 class="crosssell-product-name">
                                <a href="">AAAAA AAAAAAAA AAAAAAAA</a>
                            </h3>
                            <div class="actions clearfix">
                                <button class="button btn-cart" type="button">In den Warenkorb</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

答案 1 :(得分：0)

使用下面的css根据其他物品的高度伸展这些物品。 align-items: stretch将根据其他元素拉伸元素的高度。

ul {
  display: flex;
  list-style: none;
}

li {
  margin: 10px;
  background: red;
  flex: 1 1 auto;
  align-items: stretch;
}

这是一个有效的代码笔：https://codepen.io/bearnithi/pen/zeyXvX

相关问题
最新问题