테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

초심자 8년 전 조회 3,448
답변 2
목록

배너1
배너2
배너3

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

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

 

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

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

배너1

배너2

배너3 

#css #css정렬 #레이아웃
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
지운아빠

http://minsup.kr/study/170614/189291.html">http://minsup.kr/study/170614/189291.html 

 

</p><p><!doctype html></p><p><html lang="ko"></p><p> </p><p><head></p><p><meta charset="UTF-8"></p><p><meta name="Generator" content="EditPlus®"></p><p><meta name="Author" content="MINSUP.KR"></p><p><meta name="Keywords" content=""></p><p><meta name="Description" content=""></p><p><title>Document</title></p><p> </p><p><style></p><p>body, p {margin:0}</p><p> </p><p>#wrap {max-width:800px;margin:0 auto 30px}</p><p>#wrap:after {display:block;visibility:hidden;clear:both;content:''}</p><p>.banner { text-align:center;}</p><p>.banner1 {width:200px; background-color:red;}</p><p>.banner2 {width:300px; background-color:green;}</p><p>.banner3 {width:300px; background-color:yellow;}</p><p> </p><p>@media all and (min-width:800px) {</p><p>/* 800px 이상일 때 적용되는 스타일 */</p><p>.banner {float:left}</p><p>}</p><p> </p><p>@media all and (max-width:799px) {</p><p>/* 799px 이하일 때 적용되는 스타일 */</p><p>.banner {margin:0 auto}</p><p>}</p><p></style></p><p></head></p><p> </p><p><body></p><p> </p><p><div id="wrap"></p><p>    <div class="banner banner1">배너1</div></p><p>    <div class="banner banner2">배너2</div></p><p>    <div class="banner banner3">배너3</div></p><p></div></p><p> </p><p><p></p><p>    아래에 따라올 컨텐츠</p><p></p></p><p> </p><p></body></p><p></html></p><div>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
초심자
8년 전
정말,고맙습니다..아, 생각대로 할려면 반응형? 미디어쿼리 코딩까지 해야될 수준이였나봐요..! 답변해주신 덕분에 궁금즘이 풀렸습니다.!!! 감사합니다.~~
�
지운아빠
8년 전
https://www.youtube.com/watch?v=_shORWUlXmI&t=620s
코딩야화라는 유튜브 방송 중에 한번 다뤄본 내용을 올려드렸었습니다.

댓글을 작성하려면 로그인이 필요합니다.

랑

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

 

 

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
초심자
8년 전
네.알려주신대로,,했는데요. 1,2,3배너가 처음부터 쌓여있어요.. 음.. 답변 감사합니다.~~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인