Matérialiser affichage de cartes en une seule ligne
Je suis se Matérialiser à l'aide de CSS cartes, qui peut être trouvé ici: http://materializecss.com/cards.html
J'ai créé les cartes, mais le problème est que les cartes ne sont pas affichées sur une seule ligne. Je veux l'adapter, de sorte que si la page est assez large pour afficher deux cartes en une seule ligne, il faut leur montrer, mais dans mon cas, ils ne s'affichent pas sur une seule ligne.
J'ai essayé tous les types de styles d'affichage à savoir: inline, inline-block, table, table-cell, run-in, block, etc. mais rien ne leur a montré dans une ligne.
Voici mon code:
HTML:
<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>Vous devez vous connecter pour publier un commentaire.
Le problème est causé par emballage de tous vos
cardsà l'intérieur d'une étroite parent<div class="col s12 m4">il est logique pour les éléments d'habillage lorsque le conteneur est limitée en largeur.Pour résoudre ce problème, vous devez envelopper chaque carte dans un
m4colonne, comme suit:HTML:
jsFiddle: https://jsfiddle.net/azizn/6aLaoecg/
Edit: de centre les colonnes horizontalement, vous pouvez les transformer en
inline-blocks, puis de désactiver leurfloat. Le parent doit avoirtext-align: center:CSS
HTML
jsFiddle: https://jsfiddle.net/azizn/3kpj8hup/
Le truc, c'est que la largeur de votre ligne de la div est la consommation de la largeur de votre écran. Donc, même si vous modifiez la propriété d'affichage à la volée, même alors, il n'y a pas d'espace pour la ligne suivante div être placé dans la même ligne. Donc, la diminution de la largeur fait le travail.
Qui suit est la solution si vous souhaitez garder DEUX séparés LIGNE DIVS. Sinon vous pouvez tout simplement avoir une ligne div et le col s12 m4 divs à l'intérieur.
Ajouter à la suite des changements de STYLE de votre ligne de la vrd et à la fois à votre col s12 m4 divs et il devrait fonctionner de la façon dont vous le souhaitez.
Si vous souhaitez augmenter l'espacement entre les deux cartes, il suffit d'augmenter la marge droite de la valeur dans les styles.
Je pense que c'est parce que vous avez deux lignes. Supprimer la fiche deuxième à partir de la deuxième ligne et de le placer dans la première rangée.