Question

我正在尝试使用自适应网格视图来显示三个项目：

<div class="row">
    <div class="col-6">Object 1</div>
    <div class="col-3">Object 1</div>
    <div class="col-3">Object 1</div>
</div>

彼此相邻，并且如果用户的屏幕很小，则可以使用以下css将这三个项目放置在彼此下方：

    [class*="col-"] {
        float: left;
        padding: 15px;
    }

    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    @media only screen and (min-width: 992px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }

但是，当我将屏幕缩小时，我的三个对象会聚在一起，并用镀铬显示，它们各自的列的宽度仍然是大屏幕时的宽度。

Answer 1

您可以通过更改容器的弯曲方向来实现。

flex-direction: column;

编辑： 使用flexbox的工作示例，请参见https://jsfiddle.net/4bc2kqLm/

Answer 2

添加到所有“ col-”类的填充增加了额外的大小。删除它可以解决上述问题。

    [class*="col-"] {
        float: left;
      /*  padding: 15px; This padding adds to the size*/
    }

    /*For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    @media only screen and (min-width: 992px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }

<div class="row">
    <div class="col-6">Object 1</div>
    <div class="col-3">Object 1</div>
    <div class="col-3">Object 1</div>
</div>

小屏幕CSS被大屏幕CSS取代

2 个答案: