Question

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

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

我尝试了所有类型的展示广告样式：inline，inline-block，table，table-cell，run-in，block等。但没有任何东西在一行中显示出来。

这是我的代码：

＆＃13;

<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>

＆＃13;

Answer 1

问题是由于将所有cards包装在一个狭窄的父<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 s，然后停用float。父母必须有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 2

问题是你的行div的宽度消耗了整个屏幕的宽度。因此，即使您将显示属性更改为内联，即使这样，下一行div也没有空间放置在同一行中。因此减小宽度就可以了。

如果你想保持两个单独的ROW DIVS，以下是解决方案。另外，你可以简单地拥有一个行div，并且在它内部都有col s12 m4 div。

将以下STYLE更改添加到您的行div和两个col s12 m4 div中，它应该按照您希望的方式工作。

如果您想增加两张牌之间的间距，只需增加样式中的右边距值即可。

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

Answer 3

我认为这是因为你有两行。从第二行中取出第二张卡并将其放在第一行。

将显示卡实现在一行中

3 个答案: