首页 文章

如何使用Materialize Design在行中设置五列？

提问于
浏览 次
1

我正在使用物化设计框架来响应html页面 . 我们可以轻松地连续管理2,3,4列 . 但是现在我想连续显示5列 .

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
    </div>
  </div>

我想连续显示五张图片 .

html css3 media-queries material-design materialize

3 回答

  • 0

    试试这个HTML和CSS吧......

    HTML： -

    <div class="row-cover"><div class="row-wrap"><div class="row">
      <div class="col s2 offset-s1">1</div>
      <div class="col s2">2</div>
      <div class="col s2">3</div>
      <div class="col s2">4</div>
      <div class="col s2">5</div>
</div></div></div>

    CSS： -

    .row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
@media only screen and (max-width: 767px) {
    .row-wrap { margin: 0; }
}

    这个想法对你有用，你可以改变大，中，小屏幕的响应性，只要你的要求是同意的......

    回复于
  • 0

    只需在您的css文件中添加此代码：

    .l3 {
      width:20%;
      float:left;
      }

    .l3 img {
      width:100%;
      max-width:100%;
      object-fit:cover;
      }

@media screen and (max-width: 768px) {
   .l3 {
  width:100%;
  float:left;
  }
}
    回复于
  • 0

    如果这个问题是正确和最简单的方法是......

    <div class="tab col m2 s12 offset-m1">
<div class="tab col m2 s12">
<div class="tab col m2 s12">
<div class="tab col m2 s12">
<div class="tab col m2 s12">

    显然在一排

    回复于

相关问题