html 관련된 질문
본문
저 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 코드가 없는 상태에서는 레이아웃을 잡는 방법은 여러방법이 있는데 어느방법이 최소한의 수정으로 가능할지 판단을 내릴수가 없습니다.
도움이 되실만한 사이트 링크 남겨드립니다.
각 요소를 감싸는 요소에 float:left 주시면 됩니다.
ps.
HTML CSS 딱 1주일 잡고 빡세게 공부해 보세요.
답변을 작성하시기 전에 로그인 해주세요.