前提・実現したいこと
テキストと画像の位置をずらして配置したかったので、
CSSで親要素のpositionをrelativeに、子要素であるテキストをabsoluteに設定しました。
すると、添付画像のように、子要素が親要素に収まらなくなってしまったので
######jQueryで子要素の高さを取得し、親要素に代入したいと考えています。
とりあえずコードを書いてはみましたが、正しく書けていないのか上手く実装できません。
しかし、参考になる資料が見つけられなかったので質問に至りました。
可能でしたら、途中まで書いてあるコードを原型にどこを直せば良いか教えて頂きたいです。
足りない情報等ございましたら、追記致します。
宜しくお願い致します。
該当のソースコード
HTML
1<div class="profile-content"> 2 <figure><img src="images/icon-cat.png" alt=""></figure> 3 <div class="text-group"> 4 <h3>リョウ</h3> 5 <p class="description">テキストテキストテキスト<br> 6 テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 7 <p class="description">テキストテキストテキストテキストテキストテキスト<br> 8 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 9 <p class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br> 10 テキストテキストテキストテキストテキストテキスト</p> 11 </div> 12 </div>
CSS
1.profile-content { 2 display: flex; 3 position: relative; 4 margin: 0 auto; 5 margin-top: 70px; 6} 7 8.profile .profile-content figure { 9 width: 30%; 10 z-index: 2; 11} 12 13.profile .profile-content figure img { 14 width: 100%; 15 top: 0; 16 left: 0; 17 margin: auto; 18 object-fit: cover; 19} 20 21.profile .profile-content .text-group { 22 width: 58%; 23 padding: 40px 7% 40px 15%; 24 position: absolute; 25 top: 50px; 26 right: 0; 27 background-color: LightSkyBlue; 28 font-family: 'Kosugi Maru', sans-serif; 29}
JavaScript
1$(function(){ 2 var h = $('.text-group').outerHeight(); 3 $('.plofile-content').css('height', 'h + 50px'); 4 });
補足情報(FW/ツールのバージョンなど)
HTML5・CSS3
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/03 06:20