Как расположить элемент между двумя секциями и одновременно быть отзывчивым?
Во-первых, вот пример, который я пытаюсь достичь:
Вот код, который я использую для достижения этой цели
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;
}