html - 在 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 标签添加到您要更改的卡片，并在您的 CSS 中使用该 ID 标签来去除卡片的 margin .

更新脚本<​​/strong>

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