Question

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

对于大型设备：1x3行
对于中型设备：1x2行和1x1行（在第一行中，第二列的宽度应分别为50％，而在第二行中，第三列的宽度应为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

好的，首先，您将“ 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/

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

1 个答案: