응답 디자인의 div 안에 div를 배치하십시오.

응답 디자인에서 anoter div (프로필 배너) 안에 div (프로필 그림)를 배치하고 싶습니다. 진짜 문제는 아니지만 바깥 쪽 div의 바깥쪽에있는 안쪽 div (프로필 그림)도 약간 필요합니다. 그냥 PC에 이렇게 표시해야하며 모바일 및 태블릿에서 다르게 표시 할 수 있습니다. Heres는응답 디자인의 div 안에 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" />

,210

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

당신은 외부의 div 내부 사업부에 대한 position:absolute; 및 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를 배치하십시오.

답변

관련 문제