Materialise-Karte in div-Ausgabe

Question

Also, ich bin mit diesem fiddle

Ich versuche, die beiden Behälter horizontal ausgerichtet zu halten. In diesem Beispiel sind sie, aber wenn der String asd (Zeile 4) gelöscht wird, scheint der linke Inhalt ein wenig padding oben zu bekommen und ich verstehe nicht warum.

Also möchte ich beide Inhalte ausgerichtet haben, ohne die Zeichenfolge asd.

Prüfcodes Below

HTML

<div class="row"> 
    <div class="col s12 m8"> 
     <div class="leftContent white "> 
      <div id="profile-page-header" class="card leftContent"> 
       <div class="card-image waves-effect waves-block waves-light"> 
        <img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/096/846/original/treasure-hunter-flat-icons-vector.jpg" alt="user background"> 
        <span class="card-title"><i class="material-icons right">more_vert</i></span> 
       </div> 
       <figure class="card-profile-image"> 
        <img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg" alt="profile image" class="circle z-depth-2 responsive-imgMod activator"> 
       </figure> 
       <div class="card-content"> 
        <br> 
        <div class="row"> 
         <div class="col s3">Level: 5</div> 
         <div class="col s3 offset-s6">Rank: Master</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col s12 m4"> 
     <div> 
      <div class="white rigthContent"> 
       <div class="containerMod"> 

        <div class="row"> 
         <div class="col s12"> 
          <ul class="tabs"> 
           <li class="tab col s1"> 
            <a class="blue-text"href="#following">Urmariti</a> 
           </li> 
           <li class="tab col s1"> 
            <a class="blue-text" href="#followers" onclick="showFollowers()">Urmaritori</a> 
           </li> 
          </ul> 
         </div> 
         <br> 
         <div class="col s12 "> 
          <br/> 
          <div class="containerMod" id="following"></div> 
         </div> 
         <div class="col s12 "> 
          <div class="containerMod" id="followers"></div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

</div> 

CSS

.white{margin: 0.5rem 0 1rem 0;} 
.leftContent{ 
    border-radius: 0.5em !important; 
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important; 
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important; 
    box-shadow:   0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important; 
    margin-bottom: 1.5rem !important; 
    /* min-height: 35rem; */ 
} 
.responsive-imgMod{ 
    height: 150px; 
    width: 150px; 
} 
#profile-page-header .card-image { 
    height: 200px; 
} 
#profile-page-header .card-profile-image img { 
    position: absolute; 
    z-index: 1; 
    left: 0; 
    right: 0; 
    top:110px; 
    bottom: 0; 
    margin-left: auto; 
    margin-right:auto 
} 

Hat jemand eine Idee?

Answer 1

die Lösung

diese zu Ihrem CSS hinzufügen:

.card { 
    margin:0; 
} 

Oder was ist, wenn Sie nur diese Karte betroffen sein wollen besser sein würde;

Fügen Sie der Karte, die Sie ändern möchten, ein ID-Tag hinzu, und verwenden Sie das ID-Tag in Ihrem CSS, um die Karte margin zu entfernen.

aktualisiert Skript

https://jsfiddle.net/eL01jjf9/7/