Question

我无法将简单的图片按钮网页付诸实践。我无法在网页底部的剩余空间中对齐三个按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果你所做的只是制作一个带有四个按钮的页面，那么你真的不需要引导程序。由于.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越少越容易是为了以后的风格和修改。

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

1 个答案: