그누보드 QA - 그누보드 수정중에 css 관련해서 문의좀 드립니다.

그누보드 수정중에 css 관련해서 문의좀 드립니다.

2017.06.14 19:17:32 조회 2803 (125.♡.♡.157)

본문

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

</body>
</html>
위의 소스로 배너3개가 한줄로 가운데 정열되있는데요. 배너1,배너2,배너3

float:left; 영향으로 가로줄로 붙어있으니, 줄어들어도 왼쪽으로붙어서 쌓이는데요...

브라우저폭이 최소로 줄어들수록, 아래처럼 화면 가운데로 정렬된 상태로 쌓이도록 하고싶습니다.

어떻게 css 를 만들어야 될지...질문드립니다.

배너1

배너2

배너3

#css #css정렬 #레이아웃

답변 2

지운아빠 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-06-14 22:47:27 112.♡.♡.239

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>