목록으로

html 관련된 질문 채택완료

썸머워즈

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전 조회 2,775

답변 3

32764334_1588417337.3558.png 32764334_1588417349.6914.png

저 Main Article 상자의 시작을 Main aside 옆에서 같이 시작하게 하고 싶은데 어떻게 해야 하나요?

스타일을 어떻게 지정하면 될까요??

#html5 #css #css3

답변 3개

정렬:

채택된 답변

+20 포인트

취미생활

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

Copy

<style>
        .flexbox {
            display: flex;
        }
        .column {
            padding: 10px;
            height: 300px;
            background: silver;
            border: 1px solid grey;
        }
        .column.aside {
            flex: 1;
        }
        .column.main {
            flex: 2;
        }        
    </style>
</head>

<body>
    <article class="flexbox">
        <div class="column main">Main</div>
        <div class="column aside">Aside</div>
    </article>
</body>

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

답변에 대한 댓글 1개

폴라베어

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

flexbox를 사용할경우 하위 요소(main, aside) width값을 지정 안하면 block요소의 컨텐츠에 영향을 받게됩니다. width값을 지정해보세요

IE11 호환성을 유지해야된다면 sinbi님이 언급하신 float:left나 width값을 지정하고 display: inline-block 스타일을 이용할수도 있습니다.

https://caniuse.com/#feat=flexbox

https://d2.naver.com/helloworld/8540176