Question

我想创建一种滑块/旋转木马，因为这些项具有不同的高度，我想将它们对齐到容器的底部。截至目前，这是使用表格完成的，但当然，因为我希望我的东西也能响应，我不能允许表格。我的第一个想法是使用绝对定位，但这显然不起作用，因为元素确实需要占据一个空间。你有什么建议？

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

Answer 1

Flexbox可以做到这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen Demo

Answer 2

我会使用一个bootstrap响应面板，就像这样...... https://goo.gl/hRXG5M 告诉我你是否想要做一些不同的事情，因为我可以提供帮助。你想要什么样的解决方案？

PS：您需要导入此解决方案的相关脚本：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

正如@AndreiGheorghiu所说，你应该添加一个最小的完整例子来得到准确的答案。我会在你的categories-wheel__entries上使用vertical-align：bottom，高度为100％，所以你的div将占据他容器的整个高度，图像将位于底部。

将项目对齐到没有表格的容器底部？

3 个答案: