Css 将桌面中的多列转换为移动视图中的两列_Css_Responsive Design

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

css responsive-design

Css 将桌面中的多列转换为移动视图中的两列,css,responsive-design,Css,Responsive Design,我想将桌面视图中的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" /> <

我想将桌面视图中的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>


上校{
边框：1px实心#000000；
显示：内联块；
宽度：30%；
高度：120px；
文本对齐：居中；
左边距：35px；
右边距：1px；
}
/*-------------------流动的-------------------*/
@媒体屏幕和屏幕（最大宽度：900px）
上校{
宽度：50%；
}        
}
第1单元
第2单元
第三单元

问题在于.col类的边距这使得.col元素的两个边距都增加了50%

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

您可以使用CSS3函数CALC（）来计算确切的宽度。有关calc的更多信息，请点击此处

问题在于.col类的边距这使得.col元素的两个边距都增加了50%

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

您可以使用CSS3函数CALC（）来计算确切的宽度。有关calc的更多信息，请点击此处