테스트 사이트 - 개발 중인 베타 버전입니다

초보입니다. 단락나누기 잘안되네요 채택완료

벨보이 1년 전 조회 14,785

사진처럼 3단락으로 나누고 싶은데 잘 안됩니다. css로 만들어 주실 수 있나요?ㅠㅠ

http://sir.kr/data/editor/2405/1551348490_1714573282.4353.jpg" width="100%" />

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
1년 전

flex를 사용하여 다음과 같이 작성하시면 될것같습니다.

html 코드

 

   <div class="wrapper">

        <div class="inner-wrapper">

            <div class="box">가나다라마바사가나다라마바 가나다라마바사가나다라마바 가나다라마바사가나다라마바 사가나다라마바사가나다라마 사가나다라마바사가나다라마 사가나다라마바사가나다라마 바사가나다라마바사가나다라바사가나다라마바사가나다라</div>

            <div class="box">가나다라마바사가나다라마바 가나다라마바사가나다라마바 가나다라마바사가나다라마바 사가나다라마바사가나다라마 사가나다라마바사가나다라마 사가나다라마바사가나다라마 바사가나다라마바사가나다라바사가나다라마바사가나다라</div>

            <div class="box">가나다라마바사가나다라마바 가나다라마바사가나다라마바 가나다라마바사가나다라마바 사가나다라마바사가나다라마 사가나다라마바사가나다라마 사가나다라마바사가나다라마 바사가나다라마바사가나다라바사가나다라마바사가나다라</div>

        </div>

    </div>

css 코드

 

    .inner-wrapper {

        display: flex;

        align-items: center;

        column-gap: 20px;

        max-width: 1000px;

        margin: 30px auto;

    }</p>

<p>    .box {

        flex : 1;

        min-height: 300px;

        padding: 10px;

        line-height: 1.5;

        background-color: #f1f1f1;

    }

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
1년 전

column-count 라는 속성도 있으니 참고해 보세요.

https://homzzang.com/b/css-214

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인