J'essaie d'adapter la conception matérielle dans mon site Web personnel à l'aide de Materializecsss.com, mais le cadre ne fournit que des options à exclure autrement des images au-dessus de la conception de la carte.
Je veux réaliser quelque chose comme indiqué ci-dessous dans la liaison [2e rangée, 2e colonne / dernière image] où l'image est assise à gauche à gauche à côté du contenu principal, se demandant si quelqu'un pouvait m'aider à ce sujet et j'apprécierais vraiment votre aider à cela. merci!
3 Réponses :
Cela devrait aider
http://materializecsss.com/cards.html
Ashish, je voudrais m'excuser de ne pas être assez clair avec ma question. J'aimerais réaliser quelque chose comme la deuxième rangée, la 2e colonne, où l'image est assise à gauche du contenu.
@vizflux
Voici le code que vous voulez P>
p>
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" class="hoverZoomLink">
</div>
<div class="right-content">
<span class="card-title">Card Title</span>
<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="card">
<div class="card-image">
<img src="http://www.sauna-nj.co.jp/wp-content/uploads/2017/03/topa-zu.jpg" class="hoverZoomLink">
</div>
<div class="right-content">
<span class="card-title">Card Title</span>
<div class="card-content">
<p>岩盤浴ã§ä½¿ç”¨ã•ã‚Œã‚‹ã®ã¯æ¥µã‚ã¦çã—ã„鉱石ã§ã™ã€‚åŠ ç†±å¤‰è‰²ã™ã‚‹å®çŸ³ã®ä»£è¡¨ã€‚ã¾ãŸãã®ä¸ã§ã‚‚大変çã—ãã€åŠ 熱や摩擦圧力ã§å¸¯é›»ã—数時間ã¯ç¶æŒã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ãã®å¾Œä¸å’ŒçŠ¶æ…‹ã«æˆ»ã‚‹éš›ã«ç™ºã™ã‚‹é›»è·ã‚’身体ã«å—ã‘ã‚‹ã“ã¨ã§è‚©ã“りや冷ãˆæ€§ã®æ”¹å–„ã€ç¥žçµŒæ€§ç–²åŠ´ã‚„神経衰弱ã®å›žå¾©ãªã©æ§˜ã€…ãªç—‡çŠ¶ã‚’改善ã™ã‚‹ã¨ã„ã‚ã‚Œã¦ã„ã¾ã™ã€‚
</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>