1. 首页
  2. 问答
  3. Materialise的显示卡在一行

Materialise的显示卡在一行

2016-05-01 22 views
1

我使用Materialise的CSS卡，可以在这里找到：http://materializecss.com/cards.htmlMaterialise的显示卡在一行

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

我尝试了所有类型的显示风格，即：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>

来源

2016-05-01 Yogesh Singh Choudhary

回答

6

该问题是由于将所有的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，然后禁用它们的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/

来源

2016-05-01 07:00:20 Aziz

+0

非常感谢！它终于解决了我的问题。顺便说一句，'磨合'属性在我访问过的一个网站中描述了解决这个问题，但它没有解决它。以下是W3school关于它的说法：“根据上下文将元素显示为块或内联。”还有一件事：**“我如何对准这些卡的中心”？** –

+0

非常感谢！问题终于修复了！ –

+0

非常感谢！奇迹般有效！ – Eduardo

-1

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

来源

2016-05-01 05:52:46 Enjayy

+0

我也试过。当我删除第二行时，显示卡的宽度为100％。 –

2

的事情是，你的行div的宽度消耗完全宽度你的屏幕。因此，即使您将显示属性更改为内联，即使这样，下一行div也没有空间放置在同一行中。所以减小宽度就是工作。

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

将以下STYLE更改添加到您的行divs和您的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%;">

来源

2016-05-01 07:06:42

相关问题

 相关问题