极客观点
项目管理
HarmonyOS
我正在使用 Materialize CSS 卡，可以在这里找到：http: //materializecss.com/cards.html
我创建了卡片，但问题是卡片没有显示在一行中。我希望它们具有响应性，因此如果页面足够宽以在一行中显示两张卡片，它应该显示它们但在我的情况下它们不会在一行中显示。
I tried all types of display styles namely: 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>© Yogesh Singh Choudhary</p>
</div>
</footer>
</body>
</html>
原文由 Yogesh Singh Choudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议
问题是由于将所有
cards包装在一个狭窄的父级中<div class="col s12 m4">当容器宽度有限时，元素包装是合乎逻辑的。要解决此问题，您应该将每张卡片包装在
m4列中，如下所示：jsFiddle: https://jsfiddle.net/azizn/6aLaoecg/
编辑： 要水平居中列，您可以将它们变成
inline-blocks 然后禁用它们float。父母必须有text-align: center：CSS
HTML
jsFiddle: https://jsfiddle.net/azizn/3kpj8hup/