MaterializeCSS Card Design

Question

Sto cercando di adattare il Material Design nel mio sito web personale utilizzando materializecss.com, tuttavia il framework fornisce solo opzioni per escludere altrimenti immagini sopra il design della carta.

Voglio ottenere qualcosa come mostrato di seguito nel link [2a riga, 2a colonna/ultima immagine] dove l'immagine è seduta a sinistra accanto al contenuto principale, chiedendo se qualcuno potrebbe aiutarmi su questo e io apprezzerei molto il tuo aiuto su questo. Grazie!

Card Material Design Example

Answer 1

@vizFlux

Ecco il codice che si desidera

.card-image { 
 
    float: left; 
 
    width: 40%; 
 
    height: 250px; 
 
} 
 
.card-image img { 
 
    height: 100%; 
 
} 
 
.right-content { 
 
    width: 60%; 
 
    float: left; 
 
} 
 
.card-title { 
 
    padding-left: 20px; 
 
}

<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>

l'uscita dovrebbe essere simile a questa:

Answer 2

Questo dovrebbe aiutare http://materializecss.com/cards.html

<div class="row"> 
    <div class="col s12 m7"> 
     <div class="card"> 
     <div class="card-image"> 
      <img src="images/sample-1.jpg"> 
      <span class="card-title">Card Title</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> 

Answer 3

.card-image { 
 
    float: left; 
 
    width: 40%; 
 
    height: 250px; 
 
} 
 
.card-image img { 
 
    height: 100%; 
 
} 
 
.right-content { 
 
    width: 60%; 
 
    float: left; 
 
} 
 
.card-title { 
 
    padding-left: 20px; 
 
}

<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>