박스 레이아웃 질문!
밝은빛누리예
안녕하세요 레이아웃을 하다가 도저히 안되는게 있어서 질문드려요ㅠ
갤러리 같은 부분에 많이 쓰이는 스타일인데요..
우선은 제가 나타내려고 하는 레이아웃은..
이런 나열의 레이아웃이예요
소스는..
!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml lang=ko xml:lang=ko
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
title박스 레이아웃/title
style type=text/css
!--
div.boxs {overflow:hidden; width:500px; background:#eee;}
div.boxs div {display:inline; float:left; width:100px; margin:0 0 10px 20px; background:black;}
div.box1 {height:100px;}
div.box2 {height:200px;}
div.box3 {height:100px;}
div.box4 {height:100px;}
div.box5 {clear:left; height:100px;}
div.box6 {height:100px;}
div.box7 {height:200px;}
div.box8 {height:100px;}
div.box9 {clear:left; height:100px;}
div.box10 {height:100px;}
div.box11 {height:100px;}
div.box12 {height:100px;}
--
/style
/head
body
div class=boxs
div class=box1 1/div
div class=box2 2/div
div class=box3 /div
div class=box4 /div
div class=box5 /div
div class=box6 /div
div class=box7 /div
div class=box8 /div
div class=box9 /div
div class=box10 /div
div class=box11 /div
div class=box12 /div
/div
/body
/html
다음 줄로 넘어갔을 때 처음 박스에 clear:left 를 줬어요
중간에 긴 박스가 있기때문에 틀어지는 걸 방지하기 위해서요
현재 이렇게 코딩했을때 위에 사진처럼 맞게 보이는 브라우저는
파폭, 사파리, 오페라 입니다.
그런데.. ie에서는 많이 틀어져요
위의 사진처럼 많이 틀어지네요
ie에서 정렬이 잘 되게 하려면 어떻게 해야 할까요?
도와주세요 ㅠ
-
피네
display:inline block; + vertical-align:top; 을 하니까 세로로만 나열되네요 ㅠㅠㅠ
-
가리매
float:left; 말고
display:inline-block; + vertical-align:top; 사용해보세요. -
새론
위,중간,아래 로 나눠서 박스 4개씩 묶어보는건 어떨까요?
-
좍좍
답변 감사합니다!! 그런데.. 전 왜 안될까요 ..ㅠㅠㅠㅠ
혹시 수정하신 파일이 있으시면 첨부부탁드려요 ㅠㅠ -
안토니
공부할게 생겼군요..~!ㅎㅎ
-
달달한캔디
꺄오~ 재밌는 css
-
큰솔
display:inline-block;
*dispaly:inline;
zoom:1;
vertical-align:top;
박스에 요렇게 네개 선언해 주시면 ie나 다른 브라우저에서도 다 됩니다. -
지희
예전에도 한번 위, 중간, 아래로 나눠서 해본적이 있거든요 그렇게 하면 되긴하는데..
만약에 위에 소스를 ul로 했을땐.. 좀 불필요하게 나눠지는게 아닌가 생각이 들어서 다른방법이 없을까
고민하게 됐어요 ㅠ -
보람
와우~ 놀랄뿐이네용