Question

我是网络开发的新手，我正在制作物化卡。它在笔记本电脑上正常工作但是当我尝试在iPad上运行它时卡片正在重叠。

.container-fluid {
  margin-top: 500px;
  /*
    padding-left: 100px;
    padding-right: 100px;
*/
}

.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 background-color: blue;
}

#card-img {
  height: 200px;
}

.card-content {
  margin-top: -17px;
  color: black;
}

.card-action {
  margin-top: 38px;
}

<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/stackcss.css">
</head>

<body>

  <div class="container-fluid">
    <div class="row">

      <div class="col m3">
        <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 z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
          </div>

          <div id="thumbnail" class="z-depth-5"></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 m3">
        <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 z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
          </div>

          <div id="thumbnail" class="z-depth-5"></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>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

      <script src="js/matjs.js"></script>

</body>

</html>

Answer 1

你试图在一条线上有四张牌，每张牌的宽度为280px，这使得它的总宽度为1120px。此外，您有50px的左右边距（.container-fluid），这将为总宽度添加100px。最终你会在这些卡片之间留出一些空间，所以再添加一百张。此部分的总宽度为1320px是最小值，允许您将这些卡中的四张放在一条线上。根据{{3}}您分配给卡片的.m3课程，将所有这些卡片保存在.row一行中，直到您的屏幕分辨率超过600px宽，否则所有卡片将重新排列以填充多行。

基于提供的具体内容，您可以将.m3类更改为.xl3，从而再购买600px。但是对于.xl级，您的1320px部分仍然比1200px宽，因此您可以考虑减少.container-fluid的左右边距和/或减少卡片的宽度。

为什么填充不在卡片中工作

1 个答案: