如何在CSS中结合响应式布局和相等高度列？

Question

我是CSS的新手，我目前正在努力将响应式布局结合起来，根据显示的屏幕和列中的高度相等。我似乎已经设法单独执行它们（1.在为列定义固定高度时使用响应式布局 - 但这会变得混乱，因为文本可以溢出或2.使用flex但是没有媒体查询来绘制等高的列。我有3列，我的目标是：

• 适用于大型设备：1x3线
• 对于中型设备：1x2行和1x1行（在第一行中，2列的宽度各应为50％，而在第二行中，第3列的宽​​度应为100％。）
• 适用于小型设备：3x1（3行，每列宽度应为100％）

我有两个主要问题：

• 列的背景颜色的高度在所有三个中都不相等 - 尽管边框是
• 即使对于小型设备，列也不会覆盖多条线。

这是我在jsfiddle中的代码：https://jsfiddle.net/chrissa3/967nzmus/#&togetherjs=N0boOJaHPF

并附在这里：

    *{
       box-sizing: border-box;
       font-family: "Book Antiqua";
     }
    
     h1 {
       margin-bottom: 15px;
       text-align: center;
     }
    
     .row {
       width: 100%;
       display: flex;
       overflow: auto;
     }
    
     .box {
       flex: 1;
       background-color: #AAAAAA;
       color: white;
       text-align: justify;
       padding: 10px;
       margin-left: 20px;
       margin-right: 20px;
     }
    
     h2 {
       position: relative;
       background-color: #222222;
       color: white;
       border: 1px solid white;
       text-align: center;
       width: 40%;
       margin-inline-start: 60%;
     }
    
     /********** Large devices only **********/
    
     @media only screen and (min-width: 1200px) {
       .col-lg-4 {
         float: left;
         border: 1px solid black;
         width: 33.33%;
       }
     }
    
     /********** Medium devices only **********/
    
     @media only screen and (min-width: 992px) and (max-width: 1199px) {
       .col-md-6,
       .col-md-12 {
         float: left;
         border: 1px solid green;
       }
       .col-md-6 {
         width: 50%;
       }
       .col-md-12 {
         width: 100%;
       }
     }
     /********** Small devices only **********/
     @media only screen and (max-width: 991px) {
       .col-sm-12 {
         float: left;
         border: 1px solid red;
         width: 100%;
       }
     }

    <h1>Responsive layout test</h1>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 1!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 2!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
          <div class="box">
            <h2>I am number 3!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            </p>
          </div>
        </div>
      </div>

非常感谢您提供的所有帮助！

Answer 1

好的，首先你混淆了“浮动”和“弹性”。

制作Flex布局时，没有任何东西可以使任何东西浮动。

所以接下来才意识到：

display:flex;

适用于以下儿童，而不是更深层次的儿童。这就是为什么你的外边框有相同的高度（例如你在“col-xs-12”上使用它。你真正想要的是相同的高度是你的“盒子” - >这里我增加了一个高度： 100％;在这种情况下适用于flexbox。

在html部分，我为所有这些列添加了一个“列”类，在这里你应该继续并定义总是计数的样式（填充，边框等）

随着这些样式的应用，你已经拥有了你想要的高度和东西。现在你希望它打破响应，因此你使样式达到50％/ 50％/ 100％已经可以了。正如您已经观察到的结果是：25％/ 25％/ 50％。

这只是默认情况下flex的工作方式：它将所有子项放在一行中并将其宽度计算为总计100％（在顶部示例中除以2）

要制作您想要的布局：

flex-wrap: wrap;

这使您的布局看起来像所需的方式响应。

这是更新的小提琴：https://jsfiddle.net/smynzw8t/