前提・実現したいこと
isaraの模写コーディングを行っているのですが、そのうえでボーダーの高さをそろえたいです。
発生している問題・エラーメッセージ
添付画像1番目が自分がコーディングした画像であり、添付画像2番目が問題模写部分です。 見てわかるように、ボーダーの高さが異なっています。
該当のソースコード
HTML
1<!--teacher--> 2<div id="teacher" class="text-center"> 3 <h3 class="title-padding white">創業メンバー</h3> 4 <p class="font-bold white">実際にフリーランスとして活躍しているエンジニアが立ち上げました</p> 5 6 <div class="teacher-introduce"> 7 8 <div class="row teacher-content"> 9 10 11 <div class="col-md-6"> 12 <div class="teacher-item"> 13 <img src="images/shohey.png" class="circle"> 14 <div class="teacher-description"> 15 <p class="padding">フリーランス講師</p> 16 <p>大滝 昇平</p> 17 <p class="detail">月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています!</p> 18 </div> 19 </div> 20 </div> 21 22 <div class="col-md-6"> 23 <div class="teacher-item"> 24 <img src="images/manabu.png" class="circle"> 25 <div class="teacher-description"> 26 <p class="padding">フリーランス講師</p> 27 <p>坂内 学</p> 28 <p class="sentence-padding-bottom detail">アドバイザーとして参画しました。新卒で海外就職して11ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。</p> 29 <p class="detail">お仕事はWebマーケティングとプログラミングが専門領域です。</p> 30 </div> 31 </div> 32 </div> 33 34 </div><!--teacher content end--> 35 36 </div><!--teacher introduce end--> 37</div><!--teacher end--> 38 39 40
CSS
1#teacher{ 2 background-image: url(images/teacherbg.jpg); 3 background-size: cover; 4 height:1222px; 5} 6 7 8.circle{ 9 border-radius:50%; 10 width:50%; 11} 12 13 14.teacher-content{ 15 width:70%; 16 margin: 0 auto; 17 color: white; 18 display: flex; 19} 20 21.teacher-description{ 22 border: 2px solid white; 23 padding: 5%; 24 margin:-2rem 5% 5% 5%; 25} 26 27.detail{ 28 text-align: left; 29}
試したこと
調べたところflexboxを使用すればできるとのことだったのですが、flexboxを親要素であるteacher-contentに適用させても揃いませんでした。borderを適用させているのが講師紹介に当たるteacher-descriptionであるため、borderの高さは揃わないということまでは理解できたのですが、では実際にどのようにコーディングを行うべきなのかわからなくなってしまいました。
何卒ご教授くださいませ
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/18 01:00
2020/03/19 06:23