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

【问题标题】：Coding columns for viewing on computer vs mobile用于在计算机和移动设备上查看的编码列
【发布时间】：2021-06-30 08:57:13
【问题描述】：

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

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

<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>

【问题讨论】：

简短回答。媒体查询。长答案。使用弹性而不是浮动。并在移动设备上使用 flex-direction 列（在媒体查询中）

标签： html css multiple-columns

【解决方案1】：

如果我理解正确，您希望列响应。您可以通过如下所示的 flexbox 执行此操作

<html>
 <head>
    <style>
    {
        box-sizing: border-box;
    }
    /* Set additional styling options for the columns*/
    .row {
      display: flex;
      width: 100%;
    }
    
    

    .column {
flex-basis:50%;
}
    
    @media only screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
    </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>

【讨论】：

【解决方案2】：

对于移动设备，如果您不指定任何布局相关规则，块将相互堆叠（上下），因为 div 是块级元素。

然后，在您的媒体查询中，您可以执行以下操作：

.row {
  display: flex;
}

或者，您可以从一开始就使用 flex 布局（即在一般的无媒体查询部分），并使用 flex-wrap 属性。

.row {
  display: flex;
  flex-wrap: wrap
}

【讨论】：

【解决方案3】：

使用flexbox 而不是float 进行布局。并更改 media query 内的方向（根据需要调整断点）

使用浮动（几乎）从来都不是一个好主意，因为它会将内容从文档的正常流程中取出。唯一可以接受浮点数的用例是当您想在图像周围环绕一些文本时。

对于布局，您应该使用 flexbox 或 css 网格。

.row {
  display:flex;
  flex-direction: row;
  width:100%;
}
.column {
   flex: 0 0 50%;
}

@media only screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

<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>

【讨论】：

【解决方案4】：

使用媒体查询。

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

【讨论】：

【解决方案5】：

您可以通过display: grid 实现这一目标。

* {
  box-sizing: border-box;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

<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>

【讨论】：

【解决方案6】：

<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
    <style>
        {
            box-sizing: border-box;
        }
        /* Set additional styling options for the columns*/

        @media (min-width: 768px) {
            .d-md-flex {
                display: flex!important;
            }
        }
        .flex-grow-1 {
            flex-grow: 1!important;
        }
    </style>
</head>
<body>
<div class="d-md-flex">
    <div class="flex-grow-1" style="background-color:#FFB695;">
        <h2>Column 1</h2>
        <p>Data..</p>
    </div>
    <div class="flex-grow-1" style="background-color:#96D1CD;">
        <h2>Column 2</h2>
        <p>Data..</p>
    </div>
</div>
</body>
</html>

【讨论】：

为什么要改变元素的类？为什么要添加 !important ？为什么没有描述你的答案？
@MihaiT 由于代码中的所有内容都是可以理解的，我认为描述并不重要。为了方便，我换了班。
永远不要为了你的轻松而改变任何东西。您应该回答 OP 的理解。是的，即使代码看起来可以理解，您也应该始终包含有关代码功能的简短描述。还有，!important 的使用呢？