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一个负的边距顶部值。我同意这不是最优雅的解决方案，但它完成了工作。此外clear:both，在页脚中添加 a 将阻止您当前拥有的两个 DIV 的覆盖

CSS：

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

.card-footer{
    clear: both;
}

Answer 2

只需从margin您的主 div 中删除，如果您想删除正文默认空白，则在正文上使用以下 css

body{
    margin:0;
    padding:0;
}