2016-10-18 47 views
0

回答デザインでanoter div(プロファイルバナー)内にdiv(プロフィール画像)を配置したいと考えています。本当に問題ではありませんが、私はまた、内側のdiv(プロフィール画像)を外側のdivの外側に少ししたいと思います。それは単にPC上でこのように表示する必要があり、それは携帯電話とタブレットで異なって表示することができます。作成しようとして何イムのレスポンシブデザインのdiv内にdivを配置

HERESに絵: enter image description here

それでは、私が欲しいのは、わずかに外側に、内側のdivを持つdivの内側の応答div要素です。それは、異なる画面解像度のために応答しなければならない。

私は、これは、リクエストの答えの詳細ですけど、私はどのようにこの

+0

をプロフィールの写真。 –

+0

ちょうど絶対を使用してプロフィール画像を配置します –

+0

あなたはどんなエラーがありますか?何を試しましたか? – Weedoze

答えて

0

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

-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>

+0

あなたのコードは応答性のあるデザインを作っていますか? –

+0

私はちょうど彼にサンプルを与えました。 – Mahi

2

あなたは外のdivのために、内側の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