Question

我有六个DIV。我想连续三次。我正在尝试制作它们＆＃34;响应/平板电脑＆＃34;友好且易于移动的视图。每个div将包含使用span / icon的glyphicon如何使文本垂直居中？如何让div在较小的设备上划线而不是标准的平板电脑尺寸。

＆＃13;

@media only screen and (min-width: 768px) {
.one,.two, .three, .four, .five, .six{
   float: none;
}

.one{
    background-color:#323232;
}
.two{
    background-color:#2775EC;
}
.three{
    background-color:#800000;
}
.four{
    background-color:#00899f;
}
.five{
    background-color:#a500ac;
}
.six{
    background-color:#009000;
}

.one, .two, .three, .four, .five, .six{
    float:left;
    width:33.33%;padding-bottom:25%;
    border: #ffffff solid 4px;
    transition: all .15s ease-in-out;
    z-index:0;
    color:#ffffff;
    text-align:center;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover, .six:hover {
    background-color: #ffffff;
    color: #ffffff;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}}

＆＃13;

   <div class="container" style="width:100%">
   <div class="one"><span class="glyphicon glyphicon-search" style="font-size:52px">One</span></div>
   <div class="two">here two</div>
   <div class="three">here three</div>
   <div class="four">here four</div>
   <div class="five">here five</div>
   <div class="six">here six</div>

＆＃13;

Answer 1

确保正确缩进代码。您的代码中存在一些语法错误。在您的html中，您缺少容器元素的结束div标记。在您的CSS中，您没有正确关闭媒体断点。

我对您的代码进行了一些更改，希望这对您有帮助。

HTML

<div class="container">
  <div class="one">One</div>
  <div class="two">here two</div>
  <div class="three">here three</div>
  <div class="four">here four</div>
  <div class="five">here five</div>
  <div class="six">here six</div>
</div>

CSS

  @media only screen and (max-width: 768px) {
    .one,
    .two,
    .three,
    .four,
    .five,
    .six {
      float: none;
    }
  }

  .one {
    background-color: #323232;
  }

  .two {
    background-color: #2775EC;
  }

  .three {
    background-color: #800000;
  }

  .four {
    background-color: #00899f;
  }

  .five {
    background-color: #a500ac;
  }

  .six {
    background-color: #009000;
  }

  .one,
  .two,
  .three,
  .four,
  .five,
  .six {
    float: left;
    width: 50vh;
    height: 50vh;
    line-height: 50vh;
    border: #ffffff solid 4px;
    color: #ffffff;
    text-align: center;
  }

  .one:hover,
  .two:hover,
  .three:hover,
  .four:hover,
  .five:hover,
  .six:hover {
    background-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
  }

Codepen link

Verticle将文本与具有百分比的三个Div对齐

1 个答案: