时间戳

首页 > 解决方案 > 如何在 CSS 中结合响应式布局和等高列？

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

问题描述

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

我有两个主要问题：

这是我在 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>

非常感谢您的所有帮助！

标签： htmlcsslayoutresponsive

解决方案

好的，首先你把“float”和“flex”混为一谈。

当你制作一个 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/

推荐阅读