Verticle以百分比連續排列三個Div的文本

Question

我有六個DIV。我想連續三次。我試圖讓他們「敏感/平板電腦」友好，也易於移動視圖。每個div將包含一個使用span/icon的圖形如何讓文本垂直居中？如何讓div在比標準平板電腦尺寸更小的設備上放置一條線。

@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); 
 
}}

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

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