CSS tiles 大小调整

Question

我试图让我的图 block 看起来一样，即使里面的文字增加了。但它似乎能够使用 word 属性。我想制作“购买延长保修”和“列出服务包的机器” “要和别人一样。 任何人都可以帮忙吗？

.tile {

width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 30px;
margin-bottom: 40px;
text-align:center;

.tile:hover
{
background:#F8F9F9;
}



    <div class="tab-pane active" id="warranty">
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

                                    </div>
                                </div>

Answer 1

你可以为此使用flex-box:

CSS:

.tab-pane {
    display: flex;
    flex-wrap: wrap;
}

.tile {
    width: 100%;
    padding: 30px;
    margin-bottom: 40px;
    text-align: center;
    display: block;
}

.tile:hover {
    background: #F8F9F9 !important;
}

HTML

<div class="tab-pane active" id="warranty">
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

    </div>
</div>

我将您的 col-md-4 类调整为 col-sm-4 以便您可以看到它的实际效果。我包含了 bootstrap CDN CSS，因为您在 HTML 中使用了 bootstrap 类名。我添加了 !important 来覆盖 anchor 标记上的内联颜色样式。

这是实际操作的 fiddle : https://jsfiddle.net/mjqfjbh0/1/