时间戳

首页 > 解决方案 > 用于在计算机和移动设备上查看的编码列

html - 用于在计算机和移动设备上查看的编码列

问题描述

一个愚蠢的简单问题，但我是 CSS 新手，对 HTML 很生疏。

我需要在以下代码中添加什么，以便在移动设备上查看时，两列从左/右布局变为顶部/底部布局？

<html>
 <head>
  <style>
  {
      box-sizing: border-box;
  }
  /* Set additional styling options for the columns*/
  .column {
  float: left;
  width: 50%;
  }

  .row:after {
  content: "";
  display: table;
  clear: both;
  }
  </style>
 </head>
 <body>
    <div class="row">
        <div class="column" style="background-color:#FFB695;">
            <h2>Column 1</h2>
            <p>Data..</p>
        </div>
        <div class="column" style="background-color:#96D1CD;">
            <h2>Column 2</h2>
            <p>Data..</p>
        </div>
    </div>
 </body>
</html>

标签： htmlcssmultiple-columns

解决方案

使用媒体查询。

  @media(max-width:480px){
           .column {     
             width: 100%;
        }
      }

推荐阅读