Question

设计一个真正简单的网站，我试图让这些列高，按钮位置和图像大小完美。有什么建议？

<div class="row">
            <div class="col-md-4 col-sm-12">
                <a href="https://localbitcoins.com/?ch=bef7">
                    <div id="buytn" class="thumbnail">
                        <img src="http://www.forexnewsnow.com/wp-content/uploads/2016/10/Bitcoin.jpg"></img>
                        <div id="buy" class="caption">
                            <h2>Buy Bitcoin</h2>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-12">
                <a href="https://www.genesis-mining.com/a/18691">
                    <div id="minetn" class="thumbnail">
                        <img src="http://2.bp.blogspot.com/-uK7LaDSSyFE/Vhi2nrCu5iI/AAAAAAAAGE0/2Ht-q9oYO24/s1600/Bitcoin-mining.jpg"></img>
                        <div id="mine" class="caption">
                            <h2>Mine Bitcoin</h2>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-12">
                <a href="https://localbitcoins.com/?ch=bef7">
                    <div id="spendtn" class="thumbnail">
                        <img src="http://insidebitcoins.com/wp-content/uploads/2015/06/Shapeshift_article_cover_Bitcoinist.png"></img>
                        <div id="spend" class="caption">
                            <h2>Trade Bitcoin</h2>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

.jumbotron {
    text-align: center;
    color: white;
    background: #09f;
    text-shadow: 1px 1px 1px black;
}

#price{
    background: silver;
    margin-bottom: 20px;
}

.row {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    text-transform: uppercase;
}

我不确定如何让容器的底部全部在同一条线上，同时还要确保图像相应地填充相同数量的容器。

Answer 1

一种方法是给图像容器div一定的高度和宽度，并使用图像作为相应div的背景图像。这将有助于您正确定位图像，无论其纵横比如何。

这就是我想说的，更新你的thumnail课程

Owner

然后像这样更新你的HTML

PetCount

将按钮放在相应的缩略图div下面。

这是更新的codepen

https://codepen.io/vibhanshu/pen/xdeoqM

我希望这些图片的尺寸完全相同，并保持按钮内嵌

1 个答案: