並排放置三個按鈕不會在頂部有一個大按鈕

我無法將我的簡單圖像按鈕網頁投入使用。我無法對齊網頁底部剩餘空間中的三個按鈕。並排放置三個按鈕不會在頂部有一個大按鈕

 .fullwidth { 
 

 
     width: 100%; 
 

 
     height: 80%; 
 

 
     margin-left: 0; 
 

 
     margin-right: 0; 
 

 
     padding-left: 0; 
 

 
     padding-right: 0; 
 

 
     display: block; 
 

 
     text-align: center; 
 

 
     } 
 

 
     .tierwidth { 
 

 
     width: 33.333333333333%; 
 

 
     height: 20%; 
 

 
     margin-left: 0; 
 

 
     margin-right: 0; 
 

 
     padding-left: 0; 
 

 
     padding-right: 0; 
 

 
     display: block; 
 

 
     text-align: center; 
 

 
     } 
 

 
     html, 
 

 
     body { 
 

 
     height: 100%; 
 

 
     } 
 

 
     #footer { 
 

 
     position: fixed; 
 

 
     bottom: 0; 
 

 
     width: 100%; 
 

 
     height: 20%; 
 

 
     } 
 

 
     .btnContainer { 
 

 
     float: left; 
 

 
     }

<!DOCTYPE HTML> 
 
<HTML> 
 

 
<head> 
 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, maximum-scale=1"> 
 
    <title>Excl Home</title> 
 
    <link rel="icon" href="favicon.png" type="image/png"> 
 
    <link rel="shortcut icon" href="favicon.ico" type="img/x-icon"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <!-- FONTS BELOW --> 
 

 

 
    <!-- FONTS STOP --> 
 

 
</head> 
 

 
<body> 
 
    <a href="#" class="fullwidth"></a> 
 
    <div class="footer"> 
 
    <div class="btnContainer"> 
 
     <a href="#" class="tierwidth"></a> 
 
    </div> 
 
    <div class="btnContainer"> 
 
     <a href="#" class="tierwidth"></a> 
 
    </div> 
 
    <div class="btnContainer"> 
 
     <a href="#" class="tierwidth"></a> 
 
    </div> 
 
    </div> 
 

 
    <br class="clearFloat"> 
 

 

 
    </head> 
 

 
</html>

來源

2016-04-21 Ethan Gallant

我用代碼編輯器測試了你的代碼，並沒有遇到問題。它們對我來說是正確的 - 可以包含一張圖片來顯示您的確切問題，因爲我們無法訪問圖像？ – Jhecht

如果你正在做的是使四個按鈕的頁面，你並不真的需要引導。由於.fullwidth和.tierwidth共享很多相同的CSS屬性，因此我將這些屬性移至單個規則中。差異得到他們自己的規則（即width和height）。如果你讓它們漂浮在左邊，它們會在移到下一行之前填滿儘可能多的空間。我添加了一些顏色，以便輕鬆查看是什麼。

如果您希望.tierwidth按鈕位於固定容器中，則HTML看起來會有所不同。

.fullwidth, 
 
.tierwidth { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    display: block; 
 
    text-align: center; 
 
    
 
    float:left; 
 
} 
 
.fullwidth { 
 
    width: 100%; 
 
    height: 80%; 
 
    
 
    background-color: red; 
 
} 
 
.tierwidth { 
 
    width: 33.333333333333%; 
 
    height: 20%; 
 

 
    background-color: blue; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
}

<a href="#" class="fullwidth"></a> 
 
<a href="#" class="tierwidth"></a> 
 
<a href="#" class="tierwidth"></a> 
 
<a href="#" class="tierwidth"></a>

如果你希望做這樣的事情作爲一個大網站的一部分，並在別處使用引導程序，你應該考慮的grid system，因爲少了自定義CSS使用對於佈局而言，稍後更容易進行樣式和修改。

來源

2016-04-21 05:39:32 redbmk

感謝它的工作。 –

並排放置三個按鈕不會在頂部有一個大按鈕

回答

相關問題