CSS плитки размер tweak

Question

Я стараюсь, чтобы мои плитки выглядели одинаково даже внутри текста. Возможно, он работает даже со словом property.i хочу сделать «купить расширенную гарантию» и «Список» машины для пакета обновления», чтобы быть таким же, как и другие Любой человек может помочь

.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. И я добавил !important, чтобы переопределить ваши встроенные стили цвета в тегах привязки.

Вот скрипку, чтобы увидеть его в действии: https://jsfiddle.net/mjqfjbh0/1/