html - 使用 的金字塔结构

Question

我试过了 display:inline-block然后是 position: relative将不再有效，必须使用 <div>这些盒子没有 <div> , <span>等等

Answer 1

.tile-row{
    margin: 0 auto;
}

.tile{
     width:32%;
     float: left;
     height: 100px;
     background: #456789;
     margin-left:10px;
     margin-bottom: 10px;
 }

@media only screen and (max-width: 1000px) {
       .tile-row > div:nth-of-type(1)
        {
            float: none;
            margin: 10px 100px;

        }
}
@media only screen and (max-width: 460px) {
        .tile-row > div:nth-of-type(1){
            margin: 10px 0;
        }
        .tile{
            float:none;
            background: #333333;
            margin: 10px 0;
        }

}

<div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
</div>

检查一次这个例子。