在一行中实现显示卡

Question

我正在使用 Materialise CSS 卡，可在此处找到：http://materializecss.com/cards.html

我创建了卡片，但问题是卡片没有显示在一行中。我希望它们具有响应性，所以如果页面足够宽，可以在一行中显示两张卡片，它应该会显示它们，但在我的情况下，它们不会在一行中显示。

我尝试了所有类型的显示样式，即：inline、inline-block、table、table-cell、run-in、block、等，但没有显示在一行中。

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" media="screen,projection"/>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Let browser know website is optimized for mobile-->
    <title>My Works</title>
  </head>
  <body>
    <div class="row">
      <div class="col s12 m4">
        <div class="card" style="display:run-in;">
          <div class="card-image">
            <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
            <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
          </div>
          <div class="card-content">
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m4">
        <div class="card" style="display:run-in;">
          <div class="card-image">
            <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
            <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
          </div>
          <div class="card-content">
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">menu</i>
      </a>
      <ul>
        <li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
        <li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
        <li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
        <li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
      </ul>
    </div>
    <div class="clear" style="clear:both; height: 100px;">
    </div>
    <footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
      <div class="container">
        <p>&copy; Yogesh Singh Choudhary</p>
      </div>
    </footer>
  </body>
</html>

Answer 1

我认为这是因为你有两行。将第二行的第二张牌移到第一行。

Answer 2

问题是由于将所有 cards 包裹在狭窄的 parent 中造成的 <div class="col s12 m4">当容器宽度有限时，元素包裹是合乎逻辑的。

要解决此问题，您应该将每张卡片包装在 m4 列中，如下所示：

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

<div class="row">
  <div class="col m4">
    <div class="card">
      <div class="card-image">
        <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
        <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
  <div class="col m4">
    <div class="card">
      <div class="card-image">
        <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
        <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">menu</i>
  </a>
  <ul>
    <li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
    <li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
    <li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
    <li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
  </ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
  <div class="container">
    <p>&copy; Yogesh Singh Choudhary</p>
  </div>
</footer>

jsFiddle: https://jsfiddle.net/azizn/6aLaoecg/

编辑： 将列水平居中，您可以将它们变成 inline-block 然后禁用它们的 float。 parent 必须有 text-align: center:

CSS

.center-cols > .col {
  float:none; /* disable the float */
  display: inline-block; /* make blocks inline-block */
  text-align: initial; /* restore text-align to default */
}

HTML

<div class="row center-cols center-align">
  <!-- card -->
  <div class="col m4">
    <div class="card">
    ...
   </div>
  <!-- card -->
  <div class="col m4">
    <div class="card">
    ...
   </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/3kpj8hup/

Answer 3

问题是行的宽度 div 占用了屏幕的整个宽度。因此，即使您将显示属性更改为内联，即使如此，下一行 div 也没有 space 放置在同一行中。所以减少宽度就可以了。

如果您想保留两个单独的 ROW DIVS，则以下是解决方案。否则你可以简单地有一行 div 和里面的 col s12 m4 divs。

将以下 STYLE 更改添加到您的行 divs 和您的 col s12 m4 divs 并且它应该按照您希望的方式工作。

如果要增加两张卡片之间的间距，只需增加样式中的边距值即可。

<div class="row" style="width:420px; left:20px; display: inline-block; margin-right: 40px;">
  <div class="col s12 m4" style="width:100%;">

在一行中实现显示卡

Materialize display cards in one line

html

css

materialize

material-design