ピラミッド構造<dd>

Question

私はdisplay:inline-blockを試してみましたが、その後position: relativeはもう動作しません、これらのボックスなし<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>

チェックこのため<div>を使用することが必須です例を一度。