时间戳

首页 > 解决方案 > 将桌面中的多列转换为移动视图中的 2 列

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

问题描述

我想将桌面视图中的 3 列转换为移动视图中的 2 列。
我尝试使用不同的列宽，但我可以得到 1 column 。如何在移动视图中获得 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>

标签： cssresponsive-design

解决方案

问题是 .col 类的边距，这使得 .col 元素 50% + 两个边距。

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

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

推荐阅读