0

まず、私が達成しようとしている例を次に示します。 ここに画像の説明を入力

これを達成するために私が使用しているコードは次のとおりです

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たのですが、パーセンテージを使っていても、表示が変わるたびにめちゃくちゃになります。

4

2 に答える 2

1

.card-content手っ取り早い解決策は、負の margin-top 値を与えることです。それが最もエレガントなソリューションではないことに同意しますが、仕事は完了です。またclear:both、フッターに a を追加すると、現在持っている両方の DIV のオーバーレイが防止されます

CSS:

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

.card-footer{
    clear: both;
}
于 2015-11-25T21:00:33.853 に答える
0

メインのdivから削除するだけmarginで、ボディのデフォルトの空白を削除したい場合は、ボディに次のcssを使用します

body{
    margin:0;
    padding:0;
}
于 2015-11-25T20:52:38.567 に答える