CSS 질문 해도될지 모르겠지만 해봅니다 ㅠ

CSS 질문 해도될지 모르겠지만 해봅니다 ㅠ

QA

CSS 질문 해도될지 모르겠지만 해봅니다 ㅠ

답변 1

본문

안녕하세요!

 

어엿 코딩을 시작한지 1년이 다되어가는 유저입니다.

 

질문입니다~

 

2039367194_1616562052.3374.png

 

 

오른쪽 회색 박스(이미지)에 맞춰 글자박스를 하단정렬 하고싶습니다.

 

해당 코드는 부트스트렙을 이용하여, 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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 26
© SIRSOFT
현재 페이지 제일 처음으로