span에 float재질문입니다.
나츠
아까 질문에 답변달아주신 모든분께 감사의 말씀드리며
다른질문 하나 더 드릴려구요
아까 질문 맨밑에 어떤분꼐서 clear:both를 해주라고해서
clear를 넣을려고 했는데
나라디자인(http://naradesign.net/wp/2008/05/27/144/)에서 본건데 아래와 같은방법이 가장 낫다고 하네요..
ul class=container
lispan class=title본문제목/spanspan class=date날짜/span/li
/ul
.title {float:left;border:1px solid red;}
.date {float:right; border:1px solid red;}
.container {_height:1%;} /* IE6 및 하위 버전 브라우저 대응 Hack */
*:first-child+html .container {height:1%;} /* IE7 대응 Hack */
.container:after {content: ; display:block; clear:both; height:0; visibility:hidden;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */
이런 방법을 사용할까요?? 아님 더 짧고 간단한 방법이 있나요??그리고
title에 width값을 정해주지않아서 그런지 제목이어느정도 길어지면
float:right 걸어논 date부분이 밑으로 밀리네요..
해결방법이 width값을 주는방법밖에는 없는건가요??
임시방편으로 width와 overflow히든을 주긴했는데....
요즘 css로 코딩하는재미가 쏠쏠해요~~ 여러분들 덕분이에요
감사합니다.
-
해지개
IE6의 haslayout 해체 방법은 zoom:1 을 사용하시면됩니다. IE전용이라 벨리데이션에서 걸리지만요
그리고 그 외에는 overflow로 해결하시면됩니다.
그리고 float의 경유 content가 길어지고 공간이 없으면 당연히 떨어집니다. 글자도 계속 입력하다가 자리 없으면 떨어지죠?
그럴경우에는 최대값을 정해서 개발에서 출력해줄때 일정글이상 출력하지말라고 정해주셔야합니다.
table을 하던 멀하던 2줄이 되어버리면 디자인과 틀리게 나오겠죠 -
제철
float 내용은 아니지만 사용하신 마크업을 유지하면서
li에 position:relative; 를 주시고
class=\date\에는 position:absolute; top:0; right:0;으로 하신다음에
li스타일에 class=\date\의 사이즈만큼 padding-right와, overflow:hidden를 주셔도 될꺼 같은데요.
class=\title\ 스타일 아무것도 안주셔도 되구요. -
찰스
찬명님 블로그에서 언급 하신 부분들은 플로트 해제 방법에 대해서 말씀 하시는 것이구요 가장 간단하면서 별문제를 나타네지 않는 overflow:hidden 방법을 우선적으로 추천 해드립니다. (단 위와 같이 사용 하실땐 해당 엘리멘트에 높이 값을 넣으시면 안됩니다 , 높이값을 넣으면 스크롤생길 가능성이 있습니다.)
-
맛깔손
핵은 가능한 쓰지 않는것이 좋다고 책에서 본것 같습니다...^^;;
제목과 날짜라면...게시물 같은건가요??
ul
li style=\float:left\제목/li
li style=\float:right\날짜/li
ul
전 이렇게 했었는데...dl로 하는것이 좋다고도 하시더라구요...^^;; -
핑크빛애교
위드값을 정해주시는게 좋을듯 하구요 가상 엘리먼트가 익스6 에서 적용되지 않기 때문에
위와 같은 방법으로 하시지 않았을까 하는 생각이...듭니다.^^;