Question

我想将桌面视图中的3列转换为移动视图中的2列。
我尝试使用不同的列宽，但我可以得到1列。如何在移动视图中获得2列？

    <HTML>

     <HEAD>

    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, minimum-scale=1, maximum-scale=1, user-scalable=yes" />

     <style>

    .col  {
     border: 1px solid #000000;
      display: inline-block;
      width: 30%;     
       height: 120px;
        text-align: center;   
      margin-left:35px;    
     margin-right:1px;
       }


      /*-------------------mobile-------------------*/

      @media screen and (max-width:900px) 

     .col {
     width: 50%;
       }        
         }
        </style>
           </HEAD>
          <BODY >

          <div class="row">           

            <div class="col">                <!--  1 -->    
             cell 1 </div>  

     <div class="col">               <!--  2  -->
             cell 2         </div>     

          <div class="col">                       <!--    3  -->
          cell 3  </div>        

          </div>                              
               </BODY>
               </HTML>

Answer 1

问题在于.col类的边距这将使.col元素达到50％+两个边距。

您应该删除边距或降低百分比。

您可以使用CSS3函数CALC（）来计算确切的宽度。有关calc的更多信息在这里 https://developer.mozilla.org/en-US/docs/Web/CSS/calc

将桌面中的多列转换为移动视图中的2列

1 个答案: