html 관련된 질문

html 관련된 질문

QA

html 관련된 질문

본문

32764334_1588417337.3558.png32764334_1588417349.6914.png

 

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

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

이 질문에 댓글 쓰기 :

답변 3


<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>

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

예시 이미지의 HTML 코드가 없는 상태에서는 레이아웃을 잡는 방법은 여러방법이 있는데 어느방법이 최소한의 수정으로 가능할지 판단을 내릴수가 없습니다.

 

도움이 되실만한 사이트 링크 남겨드립니다.

https://ko.learnlayout.com/float-layout.html

각 요소를 감싸는 요소에 float:left 주시면 됩니다.

 

ps.

HTML CSS 딱 1주일 잡고 빡세게 공부해 보세요.

https://homzzang.com/b/html

https://homzzang.com/b/css

답변을 작성하시기 전에 로그인 해주세요.
전체 2,027
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT