CSS 질문 해도될지 모르겠지만 해봅니다 ㅠ
본문
안녕하세요!
어엿 코딩을 시작한지 1년이 다되어가는 유저입니다.
질문입니다~
오른쪽 회색 박스(이미지)에 맞춰 글자박스를 하단정렬 하고싶습니다.
해당 코드는 부트스트렙을 이용하여, display:table을 이용한 vertical-align:bottom은 통하지 않네요
포지션으로 height값을 고정하고 bottom:0을 하기에는 변하는 이미지 크기에 따라서 유동적으로 되지를않구요..
부트스트렙의 row, col 기능을 이용하면서, 세로값을 맞출수있는 방법이 있나요?
답변 1
부트스트랩 3버전 사용하고 계시네요
없는 클래스가 많아서 인라인으로 작성
<div class="row">
<div class="col-md-8 ceo-s1-txtArea">
<div class="ceo-s1-txtBox-wrap" style="display: flex; flex-direction: column; height: 100%; position: static;">
<div class="ceo-s1-txtBox ceo-s1-txtBox1">
<h3 class="contents-title ceo-s1-ct">
<span class="g-pointColor">한국유통물류정책학회</span>의 홈페이지 방문을 환영합니다.
</h3>
<p class="contents-article ceo-s1-ca ceo-s1-top-ca">
KOREA DISTRIBUTION & LOGISTICS POLLCY ASSOCIATION
</p>
</div>
<div class="ceo-s1-txtBox ceo-s1-txtBox2" style="margin-top: auto;">
<h5 class="ceo-s1-greetings">
안녕하십니까.<br>
부족한 저를 학회장으로 선출해 주신에 대하여 깊이 감사드리며, 앞으로 최선을 다해서<br>
학회 발전을 위해 봉사하겠습니다.
</h5>
</div>
</div>
</div>
<div class="col-md-4">
<img src="http://mani2021.cafe24.com/theme/a03/img/ceo-img.jpg" alt="CEO">
</div>
</div>
부트스트랩 4.5로 작성
<div class="row">
<div class="col-md-8 ceo-s1-txtArea">
<div class="ceo-s1-txtBox-wrap d-flex flex-column align-items-start h-100 position-static">
<div class="ceo-s1-txtBox ceo-s1-txtBox1">
<h3 class="contents-title ceo-s1-ct">
<span class="g-pointColor">한국유통물류정책학회</span>의 홈페이지 방문을 환영합니다.
</h3>
<p class="contents-article ceo-s1-ca ceo-s1-top-ca">
KOREA DISTRIBUTION & LOGISTICS POLLCY ASSOCIATION
</p>
</div>
<div class="ceo-s1-txtBox ceo-s1-txtBox2 mt-auto">
<h5 class="ceo-s1-greetings">
안녕하십니까.<br>
부족한 저를 학회장으로 선출해 주신에 대하여 깊이 감사드리며, 앞으로 최선을 다해서<br>
학회 발전을 위해 봉사하겠습니다.
</h5>
</div>
</div>
</div>
<div class="col-md-4">
<img src="http://mani2021.cafe24.com/theme/a03/img/ceo-img.jpg" alt="CEO">
</div>
</div>
감사합니다 !ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
