<!doctype html>
<head>
<style>
#wrap {max-width:800px; margin:0 auto;}
.banner1, .banner2, .banner3 { float:left; text-align:center;}
.banner1 {width:200px; background-color:red;}
.banner2 {width:300px; background-color:green;}
.banner3 {width:300px; background-color:yellow;}
</style>
</head>
<div id="wrap">
<div class="banner1">배너1</div>
<div class="banner2">배너2</div>
<div class="banner3">배너3</div>
</div>
</body>
</html>
위의 소스로 배너3개가 한줄로 가운데 정열되있는데요. 배너1,배너2,배너3
float:left; 영향으로 가로줄로 붙어있으니, 줄어들어도 왼쪽으로붙어서 쌓이는데요...
브라우저폭이 최소로 줄어들수록, 아래처럼 화면 가운데로 정렬된 상태로 쌓이도록 하고싶습니다.
어떻게 css 를 만들어야 될지...질문드립니다.
배너1
배너2
배너3
답변 2개 / 댓글 3개
http://minsup.kr/study/170614/189291.html
<!doctype html><html lang="ko"> <head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="MINSUP.KR"><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title> <style>body, p {margin:0} #wrap {max-width:800px;margin:0 auto 30px}#wrap:after {display:block;visibility:hidden;clear:both;content:''}.banner { text-align:center;}.banner1 {width:200px; background-color:red;}.banner2 {width:300px; background-color:green;}.banner3 {width:300px; background-color:yellow;} @media all and (min-width:800px) {/* 800px 이상일 때 적용되는 스타일 */.banner {float:left}} @media all and (max-width:799px) {/* 799px 이하일 때 적용되는 스타일 */.banner {margin:0 auto}}</style></head> <body> <div id="wrap"> <div class="banner banner1">배너1</div> <div class="banner banner2">배너2</div> <div class="banner banner3">배너3</div></div> <p> 아래에 따라올 컨텐츠</p> </body></html>답변에 대한 댓글 2개
코딩야화라는 유튜브 방송 중에 한번 다뤄본 내용을 올려드렸었습니다.
.banner2 {width:300px; background-color:green;clear:both;}
.banner3 {width:300px; background-color:yellow;clear:both;}
베너 2번과 3번 클라스에 clear:both한번 넣어보시겠어요?^^
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.