MaterializeCSS कार्ड डिज़ाइन

Question

मैं materializecss.com का उपयोग करके अपनी व्यक्तिगत वेबसाइट में सामग्री डिज़ाइन को अनुकूलित करने की कोशिश कर रहा हूं, हालांकि ढांचा केवल कार्ड डिजाइन के शीर्ष पर अन्यथा छवियों को बाहर करने के विकल्प प्रदान करता है।

मैं लिंक [2 पंक्ति, दूसरी कॉलम/आखिरी छवि] में नीचे दिखाए गए कुछ हासिल करना चाहता हूं जहां छवि मुख्य सामग्री के बगल में बाईं ओर बैठी है, यह सोचकर कि कोई इस पर मेरी मदद कर सकता है और मैं वास्तव में सराहना करता हूं इस पर आपकी मदद। धन्यवाद!

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>