jquery - 将物品对准没有 table 的容器底部？

我想创建一种滑块/转盘，并且由于这些物品具有不同的高度，所以我想将它们与容器的底部对齐。到目前为止，这是使用表完成的，但是当然，因为我希望我的东西也能响应，所以我不允许使用表。我的第一个想法是使用绝对定位，但是显然不起作用，因为元素毕竟确实需要占用空间。你有什么建议？

HTML：

<div class="categories-wheel">
        <div class="container">
            <div class="categories-wheel__arrow categories-wheel__arrow--left">
                <span class="middle-vertical-align-helper"></span><!--
                @fix: no whitespace allowed between span and i tags
                --><i class="icon icon-thin-chevron-left"></i>
            </div>


            <div class="categories-wheel__arrow categories-wheel__arrow--right">
                <span class="middle-vertical-align-helper"></span><!--
                @fix: no whitespace allowed between span and i tags
                --><i class="icon icon-thin-chevron-right"></i>
            </div>

            <div class="categories-wheel__entries">

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_green.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Green </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_agm.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> AGM </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_forte.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Forte </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_terra.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Terra </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_moto.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> RBX </span>
                </div>

            </div>
        </div>
    </div>

CSS：

/*
 * CATEGORIES WHEEL
 * ============================================== */

.categories-wheel {
    height                      : 270px;
    padding                     : 30px 10px;
    background                  : #ffffff;
    text-align                  : center;
}

.categories-wheel__arrow {
    display                     : inline-block;
    height                      : 100%;
    padding                     : 0 10px;
    font-size                   : 6em;
    color                       : #cccccc;
    line-height                 : 240px;
}

.categories-wheel__arrow:hover {
    cursor                      : pointer;
    color                       : #b1b1b1;
}

.categories-wheel__arrow--left {
    float                       : left;
}

.categories-wheel__arrow--right {
    float                       : right;
}

.categories-wheel__entries {
    display                     : table;
    margin                      : 0 auto;
}

.categories-wheel__entries__entry {
    display                     : table-cell;
    vertical-align              : bottom;
    padding                     : 0 10px;
}

.categories-wheel__entries__entry:hover {
    cursor                      : pointer;
}

.categories-wheel__entries__entry:hover .categories-wheel__entries__entry__name {
    color                       : #ed161c;
}

.categories-wheel__entries__entry:hover .categories-wheel__entries__entry__image {
    animation                   : zoomInOut 0.2s ease;
}


.categories-wheel__entries__entry__name {
    display                     : block;
    width                       : 100%;
    margin-top                  : 10px;
    text-align                  : center;
    font-size                   : 2em;
    font-weight                 : 500;

    transition                  : color 0.5s ease;
    -webkit-transition          : color 0.5s ease;
}

以及目前情况如何：http://puu.sh/ndu0y/baf72d9132.jpg

最佳答案

Flexbox可以做到这一点：

.parent {
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin: 1em auto;
}
.child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid grey;
}

<div class="parent">
  <div class="child">
    <img src="http://lorempixel.com/image_output/abstract-q-c-150-100-9.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/sports-h-c-50-100-1.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
</div>

Codepen Demo

关于jquery - 将物品对准没有 table 的容器底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35501610/