如何仅在 HTML 中使小屏幕的卡片布局可滚动

Question

我想在我的卡片布局中添加一个水平滚动（仅适用于小屏幕），这样我的所有卡片将只显示在一行中。 例如：- 类似这样的：-

适用于小屏幕 到目前为止，我已将水平 scoll 添加到容器流体（卡片布局）中，但所有卡片都排成一行。

      @media (max-width: 600px) {
       .container-fluid-flexbox {
        margin-top: 300px;
        margin-left: 0px;
        margin-right: 0px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 500px;
    }

    .card { 
        width: 10px;
        flex: 0 0 auto;
    }
     }
     @media (max-width: 800px) { 
    .container-fluid {
        margin-top: 350px;
        margin-left: 0px;
        margin-right: 0px;}

    .card { 
        display: inline-block;
        width: 100%;
       }
       }


       .container-fluid{
       margin-top: 100px;
       margin-left: 50px;
       margin-right: 50px;
       overflow-x: scroll;
       overflow-y: hidden;
       white-space: nowrap;
        }

       .card-reveal{
        color: #ffffff;
        background-color: rgba(0,0,0,0.7) !important;
         }
        div.card-reveal span.card-title{
        color: #ffffff !important;
        }

        .card {
       width: 280px;
       height: 360px;
       z-index: 5
       }


       #card-img {
       height: 200px;
       }
       .card-content {
       margin-top: -17px;
       color: black;
       }
      .card-action {
      margin-top: 38px;
      }  
      .card-button {
      margin-left: -1px;
      margin-top: -7px; 
      }

       <div class="container-fluid" style="background-color: black">
            <div class="row"> 
                <div class="col xl3">
                    <div class="card hover-reveal sticky-action z-depth-2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img id="card-img" class="activator"  src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
                        </div>
                        <div class="card-content">
                            <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>            
                            <!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
                        </div>


                        <div class="card-action">
                            <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>

                        </div>

                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                            <p>Here is some more information about this product that is only revealed once clicked on.</p>

                        </div>
                    </div>
                </div>

              <div class="col xl3">
                    <div class="card hover-reveal sticky-action z-depth-2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img id="card-img" class="activator"  src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
                        </div>
                        <div class="card-content">
                <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>            
                        </div>

                        <div class="card-action">
                            <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>

                        </div>

                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                            <p>Here is some more information about this product that is only revealed once clicked on.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

这里是一个简单的例子，如何使用 flexbox 实现这一点。

但要将其应用于您当前的标记，我建议您稍微清理一下。例如，您有一个 CSS 类 .container-fluid-flexbox，但我看不到它在 HTML 中的使用位置。此外，在您当前的标记中，.row 元素应该扮演弹性容器的角色，其子元素 .col 将扮演弹性项目的角色。

.body {
  margin: 0;
  padding:10px;
}
.container {
  box-sizing:border-box;
  display:flex;
  flex-wrap:nowrap;
  box-sizing:border-box;
  width:100%;
  padding:10px 0;
  border:1px solid #000;
  overflow:auto;
}

.card {
  box-sizing:border-box;
  padding:10px;
  width: 200px;
  min-height: 300px;
  box-shadow: 0 1px 2px #000;
  flex-shrink: 0;
  background:#fff;
}

.card + .card {
  margin-left:10px;
}

<div class="container">
  <div class="card">
    Some card content 1
  </div>
  <div class="card">
    Some card content 2
  </div>
  <div class="card">
    Some card content 3
  </div>
  <div class="card">
    Some card content 4
  </div>
    <div class="card">
    Some card content 5
  </div>
    <div class="card">
    Some card content 6
  </div>
    <div class="card">
    Some card content 7
  </div>
</div>