div 底部的对齐按钮

Question

我在尝试让每个 div“.inductees”中的按钮位于底部时遇到问题。 div 的高度是在通过 javascript 加载文档后设置的，它采用最大高度并将其余高度设置为等于它。因此我的问题是如何把它弄到底。我尝试了几种方法，但它们都破坏了 Bootstrap 列。

jsfiddle

CSS

.inductees {
    margin-bottom: 50px;
    padding-bottom: 10px;
    background-color: #FFF;
}
.inductees .info-text {
    color: #494743;
    padding: 10px;
}
.center {
    text-align: center;
}

HTML

<div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="height: 611px;" class="inductees">
                <img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
                <div class="info-text">
                    <p class="name">Shelmer Doyle Blackburn Jr.</p>
                    <ul class="list-unstyled">
                        <li>Year Inducted: 2014</li>
                        <li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
                    </ul>
                </div>
                <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="height: 611px;" class="inductees">
                <img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
                <div class="info-text">
                    <p class="name">Zachary Knight Galifianakis</p>
                    <ul class="list-unstyled">
                        <li>Year Inducted: 2014</li>
                        <li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
                    </ul>
                </div>
                <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="height: 611px;" class="inductees">
                <img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
                <div class="info-text">
                    <p class="name">Shelmer Doyle Blackburn Jr.</p>
                    <ul class="list-unstyled">
                        <li>Year Inducted: 2014</li>
                        <li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
                    </ul>
                </div>
                <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="height: 611px;" class="inductees">
                <img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
                <div class="info-text">
                    <p class="name">Zachary Knight Galifianakis</p>
                    <ul class="list-unstyled">
                        <li>Year Inducted: 2014</li>
                        <li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
                    </ul>
                </div>
                <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

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

有什么建议吗？

Answer 1

您可以添加另一个 class 来绝对定位按钮的父级 div。然后设置 bottom: 0，宽度 100% 以允许仍然居中。

例如：

.alignBottom {
  position:absolute;
  bottom: 0;
  width: 100%;
}

JSFiddle 在这里看到它工作：

https://jsfiddle.net/5hd7ow7p/2/

Answer 2

您在按钮之后关闭了应征者信息文本 div 标签，因此该按钮位于顶部。

确保文本 div 与按钮分开。这是更新版本，编辑信息文本 divs 和按钮 divs 的边距和填充，使它们居中。但这回答了你的问题。

HTML:

<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div style="height: 611px;" class="inductees">
                    <img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
                    <div class="info-text">
                        <p class="name">Shelmer Doyle Blackburn Jr.</p>
                        <ul class="list-unstyled">
                            <li>Year Inducted: 2014</li>
                            <li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
                        </ul>
                    </div>
                    </div>
                    <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

                    </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3">
                <div style="height: 611px;" class="inductees">
                    <img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
                    <div class="info-text">
                        <p class="name">Zachary Knight Galifianakis</p>
                        <ul class="list-unstyled">
                            <li>Year Inducted: 2014</li>
                            <li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
                        </ul>
                    </div>
                    </div>
                    <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a> </div>
                    </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div style="height: 611px;" class="inductees">
                    <img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
                    <div class="info-text">
                        <p class="name">Shelmer Doyle Blackburn Jr.</p>
                        <ul class="list-unstyled">
                            <li>Year Inducted: 2014</li>
                            <li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
                        </ul>
                    </div>
                    </div>
                    <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

                    </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div style="height: 611px;" class="inductees">
                    <img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
                    <div class="info-text">
                        <p class="name">Zachary Knight Galifianakis</p>
                        <ul class="list-unstyled">
                            <li>Year Inducted: 2014</li>
                            <li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
                        </ul>
                    </div>
                    </div> 
                    <div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>

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

CSS:

.wrapper {
    background-color: black;
    width: 100%;
    overflow:auto;
    padding: 20px 0;
}
.inductees {
    margin-bottom: 50px;
    padding-bottom: 10px;
    background-color: #FFF;
}
.inductees .info-text {
    color: #494743;
}
.center {
    vertical-align:center;
    text-align: center;
    margin-top:0;
    margin-bottom:10px;
}

.center button {height:100%;}

http://jsfiddle.net/8ta32wa0/3/

Answer 3

您只需添加 2 css

.inductees{
    position:relative;
}
.inductees .btn{
    position:absolute;
    bottom:15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}

div 底部的对齐按钮

Align button at the bottom of div

css

jquery

twitter-bootstrap

joomla3.0

twitter-bootstrap-3