Html 在一行中实现显示卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36963489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize display cards in one line
提问by Yogesh Singh Choudhary
I'm using Materialize CSS cards, which can be found here: http://materializecss.com/cards.html
我正在使用 Materialize CSS 卡，可以在这里找到：http: //materializecss.com/cards.html
I created the cards but the problem is that the cards aren't shown in one line. I want them responsive, so if page is wide enough to show two cards in one line, it should show them but in my case they aren't showing in one line.
我创建了卡片，但问题是卡片没有显示在一行中。我希望它们具有响应性，因此如果页面足够宽以在一行中显示两张卡片，它应该显示它们，但在我的情况下它们不会显示在一行中。
I tried all types of display styles namely: inline, inline-block, table, table-cell, run-in, block, etc. but nothing showed them in one line.
我尝试了所有类型的显示风格，即：inline，inline-block，table，table-cell，run-in，block，等，但没有表现出他们在同一行。
Here is my code:
这是我的代码：
<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>回答by Aziz
The problem is caused by wrapping all your cardsinside a narrow parent <div class="col s12 m4">it is logical for elements to wrap when the container has limited width.
问题是由于将所有内容都包裹cards在一个狭窄的父级中引起的，<div class="col s12 m4">当容器的宽度有限时，元素包裹起来是合乎逻辑的。
To fix this, you should wrap each card in a m4column, like so:
要解决此问题，您应该将每张卡片包装在一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>© Yogesh Singh Choudhary</p>
</div>
</footer>jsFiddle:https://jsfiddle.net/azizn/6aLaoecg/
jsFiddle：https ://jsfiddle.net/azizn/6aLaoecg/
Edit:to center the columns horizontally, you can turn them into inline-blocks then disable their float. The parent must have text-align: center:
编辑：要水平居中列，您可以将它们变成inline-blocks 然后禁用它们的float. 父母必须有text-align: center：
CSS
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
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/
jsFiddle：https ://jsfiddle.net/azizn/3kpj8hup/
回答by Ankush Raghuvanshi
The thing is that the width of your row div is consuming the complete width of your screen. So even if you change the display property to inline, even then there is no space for the next row div to be placed in the same line. So decreasing the width does the work.
问题是您的行 div 的宽度正在消耗屏幕的整个宽度。因此，即使您将 display 属性更改为 inline，即使下一行 div 也没有空间放置在同一行中。所以减小宽度就可以了。
Following is the solution if you want to keep TWO separate ROW DIVS. Else you can simply have one row div and both the col s12 m4 divs inside it.
如果您想保留两个单独的 ROW DIVS，以下是解决方案。否则，您可以简单地在其中包含一行 div 和 col s12 m4 div。
Add the following STYLE changes to both your row divs and to both your col s12 m4 divs and it should work the way you want it to.
将以下 STYLE 更改添加到您的行 div 和 col s12 m4 div，它应该按照您希望的方式工作。
If you want to increase the spacing between the two cards, simply increase the margin-right value in styles.
如果您想增加两张卡片之间的间距，只需增加样式中的 margin-right 值即可。
<div class="row" style="width:420px; left:20px; display: inline-block; margin-right: 40px;">
<div class="col s12 m4" style="width:100%;">
回答by Enjayy
I think it is because you have two rows. Remove the second card from second row and place it in the first row.
我认为这是因为你有两行。从第二行中取出第二张卡片并将其放在第一行中。
