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

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

QA

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

본문

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

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>

.banner2 {width:300px; background-color:green;clear:both;}
.banner3 {width:300px; background-color:yellow;clear:both;}

 

 

베너 2번과 3번 클라스에 clear:both한번 넣어보시겠어요?^^

답변을 작성하시기 전에 로그인 해주세요.
전체 106
QA 내용 검색

회원로그인

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