CSS瓷磚大小調整

我想讓我的瓷磚看起來相同甚至文字內增加。但它似乎能夠工作，即使與word property.i想要使「購買延長保修期」和「」列表服務包」的機器是別人一樣任何人都可以幫助 CSS瓷磚大小調整

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

來源

2017-02-14 MVC newbie

你希望所有的div是相同的高度，或只是具有相同的寬度和利潤？ – Ben

同樣的寬度和高度。 –

您可以使用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類，所以你可以看到它的行動。我包含引導CDN CSS，因爲您在HTML中使用引導類名稱。我添加了!important來覆蓋錨標籤上的內聯顏色樣式。

這裏的小提琴看到它在行動： https://jsfiddle.net/mjqfjbh0/1/

來源

2017-02-14 01:57:47 disinfor

即使我清除緩存和刷新瀏覽器，它仍然看起來像我一樣。和選項卡窗格將無法正常工作，如果我將顯示更改爲flex。 –

@MVCnewbie然後你需要將'.col-sm-4'包裝到另一個包裝器中，並將'flex'屬性放在上面。你使用的是什麼瀏覽器？您可能需要將瀏覽器前綴添加到'display：flex'。 – disinfor

我正在使用chrome，但是你的jsfiddle對我來說看起來很好。我添加了另一個'div'幷包含''flex'類。它也不會改變任何東西。我複製粘貼你的代碼也一樣.strange –

CSS瓷磚大小調整

回答

相關問題