MaterialiseCSS卡片設計

Question

我正嘗試使用materializecss.com在我的個人網站中調整材質設計，但是該框架僅提供了用於排除CARD設計頂部的其他圖像的選項。

我想要獲得如下圖所示的鏈接[第二行，第二列/最後一個圖像]，圖像位於主內容旁邊的左側，想知道是否有人可以幫助我，我真的很感激你在這方面的幫助。謝謝！

Card Material Design Example

Answer 1

@vizFlux

下面是代碼要

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

輸出應該是這個樣子：

Answer 2

這應該有助於 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>