세로 유동정렬 익스6 조언 부탁드려요~ㅜ
치리
수다닷컴에 늘 무한 감사드리는 웹디 입문생인데요....
늘 눈팅만 하다가 글은 오늘에서야 처음 써보게 되네요 ;;
컨텐츠 들이 늘어나면 세로 길이가 유동적으로 늘어나줘야는데..
파폭에선 외국어 li에 clear를 해주었더니 그 다음으로 오는 li들이 자리를 잘 잡아서 정렬이 되는데요
익스6에선.... 도통;; 안되네요 ㅠ
모 사이트에서 비슷한 레이아웃이 있길래 참고 하려 했지만.... 정해진 높이값을 줘서 코딩이 되어있던지라
저희 회사 작업과는 좀 맞지 않아서요 ; ㅠㅠ
카테고리들 경제 여행 취업 ... 의 요 li들은 높이가 맞게 배치가 되어야고 혹... 한 카테고리 안에 내용이 추가된다면
그것들은 맞지 않아도 상관없거든요~
이럴땐 어떻게 하는게 좋을까요??익스6에선 그냥..저도높이값을..줘서 코딩을 해야할까요?
고수님들 조언 부탁드립니다.
파폭익스6
div class=totalCon
ul
li
p class=totalConT경제/경영/p
dl
dt이런직업 매력있죠?^^이런직업 매력있죠?^^/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
dt경력속에서 녹아 나오는 노하우 전수!/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가ㅣ한소진한/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
li
p class=totalConT여행/p
dl
dt여행을 떠나요~룰루랄라/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
li
p class=totalConT취업/p
dl
dt사장님으로 살아볼까나/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
li class=clear
p class=totalConT외국어/p
dl
dt여행을 떠나요~룰루랄라/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
li
p class=totalConT철학/p
dl
dt여행을 떠나요~룰루랄라/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
dt여행을 떠나요~룰루랄라/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
li
p class=totalConT스포츠레져/p
dl
dt여행을 떠나요~룰루랄라/dt
dda href=/site/article/guide_home.aspTV구성작가구성작가작가작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp라디오구성작가ㅣ한소진/a/dd
dda href=/site/article/guide_home.asp사사ㅣ한소진/a/dd
dd class=lasta href=/site/article/guide_home.asp애니메이션연출ㅣ한소진/a/dd
/dl
/li
/ul
/div!--end .totalCon --
css
.totalCon {margin: 35px 0 0 0; padding: 0 0 0 11px;}
.totalConT {margin: 0 0 11px 0;padding:0 15px; background:url(/site/images/common/icon_pot.gif) no-repeat 0 -76px; font-size:16px; font-weight:bold; color:#333333;}
.totalCon dt {width:209px;_width:205px; height:21px; margin: 0 0 13px 0; padding:5px 8px 0 8px;_padding:5px 12px 0 8px; background:url(/site/images/keyword/totalTBk.gif) no-repeat; font-weight:bold; color:#ffffff; line-height:15px; letter-spacing:-0.07em; overflow:hidden;}
.totalCon dd {margin:0 0 0 10px; padding:0 0 0 8px; background:url(/site/images/common/icon_pot.gif) no-repeat 0 -202px; line-height:23px; }
.totalCon li .last {margin: 0 0 30px 10px; }
.totalCon li {float:left;width:218px; margin:0 9px 0 0;}
.clear {clear:both;}
-
볼수록중독
전 하나의 ul로만 가려고 했어요;;;
감사합니다 덕분에 잘 해결이 되었어요!!!!!_(__)_ -
횃눈썹
3개씩 감싸야합니다.
float의 특성을 아시면 바로 답이 나올듯합니다. -
상1큼한렩
글쎄요...LI태그를 활용한다면 말씀하신 문제가 발생하는게 맞는거 같긴한데..
div
div style=\float:left;\
ul
/ul
/div
div style=\float:left;\
ul
/ul
/div
div style=\float:left;\
ul
/ul
/div
/div
이런 구조로 간다면 말씀하신 것과 같은 이치가 될 것 같은데요?
그래야 3열이 간섭을 받지 않고 UI의 유동성이 높아질듯하네요
아님말고.