Как расположить элемент между двумя секциями и одновременно быть отзывчивым?

Во-первых, вот пример, который я пытаюсь достичь: введите описание изображения здесь

Вот код, который я использую для достижения этой цели

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но это может испортить всякий раз, когда дисплей был изменен, даже при использовании процентов.

2 ответа

Решение

Быстрое решение было бы дать .card-content отрицательное значение верхнего предела. Я согласен, что это не самое элегантное решение, но оно выполнено. Также добавление clear:both в нижний колонтитул предотвратит наложение обоих DIV, которые у вас есть в данный момент

CSS:

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

.card-footer{
    clear: both;
}

Просто удали margin сформировать ваш основной div, а также, если вы хотите удалить пробел по умолчанию для тела, используйте следующую css для тела

body{
    margin:0;
    padding:0;
}
Другие вопросы по тегам