Место div внутри div в отзывчивом дизайне

Я хочу разместить div (изображение профиля) внутри anoter div (профиль) в отзывчивом дизайне. Не проблема, но я также хочу, чтобы внутренний div (изображение профиля) немного снаружи внешнего div. Он просто должен отображаться на ПК, и он может отображаться по-разному на мобильных устройствах и планшетах.Место div внутри div в отзывчивом дизайне

Heres картина того, что им пытаются создать:

Так что я хочу отзывчивым ДИВ внутри DIV с внутренней DIV слегка снаружи. Он должен быть отзывчивым из-за разных разрешений экрана.

Я знаю, что это скорее просьбу, то А ответ, но я понятия не имею, как это сделать

источник

2016-10-18 martin j

Вы можете использовать абсолютное позиционирование для изображение профиля. –

просто используйте абсолютный, а затем расположите изображение профиля –

Итак, какая у вас ошибка? Что вы пробовали? – Weedoze

Codepen демо:

http://codepen.io/anon/pen/dpgXqp

* { 
 
    transition: .5s all ease-in-out; 
 
    -webkit-transition: .5s all ease-in-out; 
 
    -moz-transition: .5s all ease-in-out; 
 
    -ms-transition: .5s all ease-in-out; 
 
    -o-transition: .5s all ease-in-out; 
 
} 
 
.propic { 
 
    border: 2px solid #e2e2e2; 
 
    margin-top: -130px; 
 
    margin-left: 70px; 
 
} 
 
.cover { 
 
    border: 2px solid #e2e2e2; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
} 
 
.propic:hover, 
 
.cover:hover { 
 
    box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -webkit-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -moz-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -ms-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -o-box-shadow: 0 0 10px 10px #9f9f9f; 
 
}

<img src="http://4.bp.blogspot.com/-2UPJD5hegLs/UR4MlzkGTUI/AAAAAAAAAWk/xpff536gpIQ/s1600/mycover.jpg" alt="Cover_Photo" class="cover" /> 
 
<br /> 
 
<img src="http://4.bp.blogspot.com/-b3Ty2n3mrOc/UR4MAXUXHDI/AAAAAAAAAWQ/CS31CdrnNY8/s1600/profp.jpg" class="propic" alt="Profile_picture" />

Codepen ссылка:

http://codepen.io/anon/pen/dpgXqp

источник

2016-10-18 06:55:40

-1

.parent{ 
 
    width: 400px; 
 
    height:200px; 
 
    background-color:red; 
 
} 
 
.sibling{ 
 
position: absolute; 
 
    left: 100px; 
 
    top: 150px; 
 
    width:300px; 
 
    height:200px; 
 
    background-color: green; 
 
}

<div class="parent"> 
 
    
 
</div> 
 
<div class="sibling"> 
 
    </div>

источник

2016-10-18 06:51:29 Mahi

уверены, что ваш код работает отзывчивым дизайном ??? –

Я просто дал ему образец. – Mahi

вы должны использовать position:absolute; для внутренней DIV и position:relative; для внешних дел. также, если вы хотите, чтобы текст был помещен после изображения профиля внутри родительского поля, вы должны предоставить родительскому блоку пробел слева. DEMO

.user-info{ 
 
    background:#444; 
 
    position:relative; 
 
    width:100%; 
 
    height:200px; 
 
    box-sizing:border-box; 
 
    padding:16px 16px 16px 216px; 
 
    color:#FFF; 
 
    font-size:32px; 
 
    } 
 
    .profile-picture{ 
 
    background:#444; 
 
    width:150px; 
 
    height:150px; 
 
    position:absolute; 
 
    border:2px solid #FFF; 
 
    left:50px; 
 
    bottom:-50px; 
 
    color:#FFF; 
 
    text-align:center; 
 
    }

<div class="user-info"> 
 
    <div class="profile-picture">Profile Picture</div> 
 
    
 
    User Information 
 
</div>

также, если вы хотите обрабатывать отзывчивый, вы можете использовать медиа-запросы (размер, чтобы увидеть его): DEMO

источник

2016-10-18 07:07:37

Место div внутри div в отзывчивом дизайне

ответ

Смежные вопросы