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

Question

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

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

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

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

Answer 2

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

然后，在你的媒体查询中，你可以这样做：

.row {
  display: flex;
}

或者，您可以从一开始就使用 flex 布局（即在一般情况下，无媒体查询部分），然后使用 flex-wrap 属性.

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

Answer 3

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

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

对于布局，您应该使用 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>

Answer 4

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

Answer 5

使用媒体查询。

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

Answer 6

您可以通过 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>

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

Coding columns for viewing on computer vs mobile

html

css

multiple-columns