html - 如何在两个部分之间定位元素同时响应？

Question

首先，这是我要实现的示例:

这是我用来实现的代码

HTML:

<div class="card demo-card-header-pic" style="margin:15px;">
            <div style="background-image:url(https://pbs.twimg.com/profile_banners/6253282/1431474710/web_retina)" valign="bottom" class="card-header color-white no-border"></div>
            <div class="avatar">
              <img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_bigger.png" style="border-radius:50px;">
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <div>
                  <p><b>****</b> wants to know what you think of him!</p>
                </div>
                <div>
                  <span class="text-muted" style="float:left;">Asked two days ago</span>
                  <span style="float:right;" class="text-muted"> 5 comments</span>
                </div>
              </div>
            </div>
            <div class="card-footer">Footer</div>
          </div> 

CSS:

.demo-card-header-pic .card-header
{
    height: 40vw;
    background-size: cover;
    background-position: center;
}
.avatar
{
    border-radius: 50px;
}
.card > .avatar
{
    position: relative;
    top: -40px;
    left:5px;
}
.text-muted {
    color: #777;
}

我的问题是如何去掉卡片标题和文本之间的所有空白区域？我尝试使用 position:absolute，但只要显示发生变化，即使使用百分比，这也会造成困惑。

Answer 1

一个快速的解决方案是给 .card-content 一个负的 margin-top 值。我同意这不是最优雅的解决方案，但它完成了工作。还向页脚添加 clear:both 将防止您目前拥有的两个 DIV 重叠

CSS:

.card-content{
   margin-top: -40px;
}

.card-footer{
    clear: both;
}