并排放置三个按钮不会在顶部有一个大按钮

我无法将我的简单图像按钮网页投入使用。我无法对齐网页底部剩余空间中的三个按钮。并排放置三个按钮不会在顶部有一个大按钮

 .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

感谢它的工作。 –

并排放置三个按钮不会在顶部有一个大按钮

回答

相关问题