divの発行内部マテリアライズ・カード

Question

だから、私は水平に整列両方の容器を維持しようとしているこのfiddle

を抱えています。この例では、それらはありますが、文字列asd（行4）が削除された場合、左側のコンテンツは少しパディングトップになるようですが、なぜそれは理解できません。

したがって、文字列asdを使わずに、両方のコンテンツを整列させたいと思います。

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 
} 

以下

チェックコードは誰もが任意のアイデアを持っていますか？

Answer 1

ソリューション

は、あなたのCSSにこれを追加します。

.card { 
    margin:0; 
} 

それとも、あなただけのこのカードが影響を受けることにしたい場合は、何が良いだろうし。

変更するカードにIDタグを追加し、そのIDタグをCSSに使用してカードのmarginを削除します。

更新されたスクリプト

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