수다닷컴

전체적으로 화면 가운데를 맞춰야 하고.box03 이라는 박스하나로 4개 또는 6개가 한줄에 2개씩 나와야 합니다.문제는 .box03에 박스간 간격때문에margin-right를 주다보니 아래 그림에서 파란색 부분에도 마진이 들어가게 되서#box3 가 전체적으로 100px 늘어나고 그에 따라 #box1, #box4와 가운데가 맞지 않고 틀어지게 됩니다.오렌지색 라인부분으로 맞춰져야 하거든요...box03에 들어갈 내용이 랜덤이라 css로 짝수번째에만 margin-right를 빼거나 할수도 없다고 하네요.#box3에 margin이나 padding을 줬더니 화면 해상도에 따라 가운데로 가지 않거나 하구요.해결방법이 없을까요?정리를 해보면 #box1 , #box3 의 가로길이가 다른것을900,1000의 가로크기값을 가진 박스를 왼쪽 위치를 맞추면서 해상도와 관계없이 화면 가운데로 가게 하라는건데...==================================================================================================================!DOCTYPE html
html lang=ko
head
title박스문제/title
meta charset=euc-kr /
meta http-equiv=X-UA-Compatible content=IE=edge
style
#wrap {width:100%; height:50px;}
#box1 {width:900px; margin:0 auto; height:100px; background:#bbb; margin-bottom:20px; }
#box2 {width:100%; height:100px; background:#bbb; margin-bottom:20px; }
#box3 {width:1000px; height:440px; margin:0 auto; background:#aaa; margin-bottom:20px;}
.box03{float:left; width:400px; height:200px; margin-right:100px; margin-bottom:20px; background:#666;}
#box4 {width:900px; margin:0 auto; height:100px; background:#bbb;}
/style
/headbody
div id=wrap
div id=box1/div
div id=box2/div
div id=box3
div class=box03/div
div class=box03/div
div class=box03/div
div class=box03/div
/div
div id=box4/div
/div
/body
/html==================================================================================================================덧글 감사합니다.덧글들 보다가 어찌하다가 이렇게 해보니 되긴하네요.
소스수정 추가해봅니다.
이렇게 하니 어찌되었건 가운데가 되긴하는데...맞는지는 모르겠어요.#big01에 포지션으로 가운데 맞추고 다시 왼쪽마진을 줬는데..============================================================================================================!DOCTYPE html
html lang=ko
head
title박스문제 01/title
meta charset=euc-kr /
meta http-equiv=X-UA-Compatible content=IE=edge
style
#wrap {width:100%; height:50px;}
#box1 {width:900px; margin:0 auto; height:100px; background:#bbb; margin-bottom:20px; }
#box2 {width:100%; height:100px; background:#bbb; margin-bottom:20px; }
#big {width:100%; position:relative;}
#big01 {width:900px; position:absolute; left:50%; background:red; margin-left:-450px;}
#box3 {width:1000px; }
.box03{float:left; width:400px; height:200px; margin-right:100px; margin-bottom:20px; background:#666;}
#box4 {width:900px; margin:0 auto; height:100px; background:#bbb;}
/style
/head
body
div id=wrap
div id=box1/div
div id=box2/div
div id=big
div id=big01
div id=box3
div class=box03/div
div class=box03/div
div class=box03/div
div class=box03/div
/div
/div
/div

div id=box4/div
/div
/body
/html

신청하기