回答編集履歴

1 ちょうせい

yambejp

yambejp score 88171

2019/10/10 10:44  投稿

姑息ですがimgをdivで囲って高さを指定した上でセルとして動作させるとか・・・
でもこれってimgの最大値を予め知っていなくてはいけないし、あまり現実的ではないかも
むしろ画像を編集して高さを揃えてしまうほうが楽だと思います
```css
<style>
.skill-title{
 width:95%;
 height:250px;
 margin:0 auto;
 background-color:white;
 border:2px solid #EBB94C;
 border-radius:5px;
}
.skills{
 display:flex;
 width:70%;
 margin:0 auto;
}
.skill{
 display:inline-block;
 padding:5px;
}
.skill div{
height:70px;
display:table-cell;
vertical-align:bottom;
}
.skill p{
 font-size:12px;
 font-weight:lighter;
 margin-top: 10px;
 padding:5px;
}
</style>
<div class="skill-title">
<p>稼げるエンジニアに必要な5つのスキルとは?</p>
<div class="skills">
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/skill.jpg">
</div>
<p>基礎的な<br>プログラミングスキル</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/sales.jpg">
</div>
<p>案件獲得に必要な<br>営業力</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/document.jpg">
</div>
<p>見積もり作成から<br>納品までの知識</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/plusone.jpg">
</div>
<p>自分の付加価値を<br>高めるスキル</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/connection.jpg">
</div>
<p>フリーランス同士の<br>横のつながり</p>
</div>
</div>
</div>
```  
 
もしくは  
```css  
.skill div{  
height:70px;  
position:relative;  
}  
.skill div img{  
bottom:0;  
position:absolute;  
}  
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る