facebookと同じようなイメージカバーを実現する

Question

私はfacebook同様にイメージカバーを次のようにしていますが、望みの効果を達成することはできません。これは私が試しているCSSです。皆さんが分かるように、divのコンテンツは正しく配置されていません。

\t .profile { 
 
\t \t position: relative; 
 
\t } 
 
\t 
 
\t .profile-cover img{ 
 
\t \t width: 100%; 
 
\t } 
 

 
\t .profile-photo { 
 
\t \t position: absolute; 
 
\t \t left: 20px; 
 
\t \t bottom: -60px; 
 
\t } 
 

 
\t .profile-info { 
 
\t \t padding-right: 120px; 
 
\t }

<div class="profile"> 
 
\t <div class="profile-cover"> 
 
\t \t <img src="http://dummyimage.com/1200x300/000/fff" /> 
 
\t </div> 
 
\t <div class="profile-details"> 
 
\t \t <div class="profile-photo"> 
 
\t \t \t <img src="http://dummyimage.com/100x100/eee/000" /> 
 
\t \t </div> 
 
\t \t <div class="profile-info"> 
 
\t \t \t Profile info here 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div> 
 
\t Remaining content here 
 
</div>

Answer 1

あなただけ「のdivコンテンツが正しく位置付けていません」と言うが、私はそれがあることだ静かな確信しているので、私はあなたがこれを望んでいた場合、正確にわかりません。

そうでない場合は、教えてください。

絶対位置決めを使用すると、フローの要素から外れます。したがって、次の要素は、この要素が存在しないかのように続きます。そういうわけで、他の人たちがこの絶対的な要素の下で示していたのです。

次回は、そのID、クラス名、またはあなたが話していることを確実に知ることができるものを使用して、DIVを正確にしてください。これは私がそれを行うだろうかある

.profile { 
 
\t \t position: relative; 
 
\t } 
 
\t 
 
\t .profile-cover img{ 
 
\t \t width: 100%; 
 
\t } 
 

 
\t .profile-photo { 
 
\t \t display: inline-block; 
 
\t \t margin-top: -60px; 
 
\t \t margin-left: 20px; 
 
\t } 
 

 
\t .profile-info { 
 
\t \t display: inline-block; 
 
\t \t padding-right: 120px; 
 
\t }

<div class="profile"> 
 
\t <div class="profile-cover"> 
 
\t \t <img src="http://dummyimage.com/1200x300/000/fff" /> 
 
\t </div> 
 
\t <div class="profile-details"> 
 
\t \t <div class="profile-photo"> 
 
\t \t \t <img src="http://dummyimage.com/100x100/eee/000" /> 
 
\t \t </div> 
 
\t \t <div class="profile-info"> 
 
\t \t \t Profile info here 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div> 
 
\t Remaining content here 
 
</div>

Answer 2

...

.profile { 
 
    margin-bottom: 15px; 
 
} 
 

 
.profile-cover img { 
 
    width: 100%; 
 
} 
 

 
.profile-photo { 
 
    display: inline-block; 
 
    margin-left: 20px; 
 
    margin-top: -24px; 
 
} 
 

 
.profile-info { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -25px; 
 
    left: 10px; 
 
}

<div class="profile"> 
 
\t <div class="profile-cover"> 
 
\t \t <img src="http://dummyimage.com/1200x300/000/fff" /> 
 
\t </div> 
 
\t <div class="profile-details"> 
 
\t \t <div class="profile-photo"> 
 
\t \t \t <img src="http://dummyimage.com/100x100/eee/000" /> 
 
\t \t </div> 
 
\t \t <div class="profile-info"> 
 
\t \t \t Profile info here<br> 
 
      More info here 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div> 
 
\t Remaining content here 
 
</div>