수다닷컴

  • 해외여행
    • 괌
    • 태국
    • 유럽
    • 일본
    • 필리핀
    • 미국
    • 중국
    • 기타여행
    • 싱가폴
  • 건강
    • 다이어트
    • 당뇨
    • 헬스
    • 건강음식
    • 건강기타
  • 컴퓨터
    • 프로그램 개발일반
    • C언어
    • 비주얼베이직
  • 결혼생활
    • 출산/육아
    • 결혼준비
    • 엄마이야기방
  • 일상생활
    • 면접
    • 취업
    • 진로선택
  • 교육
    • 교육일반
    • 아이교육
    • 토익
    • 해외연수
    • 영어
  • 취미생활
    • 음악
    • 자전거
    • 수영
    • 바이크
    • 축구
  • 기타
    • 강아지
    • 제주도여행
    • 국내여행
    • 기타일상
    • 애플
    • 휴대폰관련
  • 프로그램 개발일반
  • C언어
  • 비주얼베이직

span에 float재질문입니다.

나츠

2023.04.01

아까 질문에 답변달아주신 모든분께 감사의 말씀드리며

다른질문 하나 더 드릴려구요

아까 질문 맨밑에 어떤분꼐서 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로 코딩하는재미가 쏠쏠해요~~ 여러분들 덕분이에요
감사합니다.

신청하기





COMMENT

댓글을 입력해주세요. 비속어와 욕설은 삼가해주세요.

  • 해지개

    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 에서 적용되지 않기 때문에
    위와 같은 방법으로 하시지 않았을까 하는 생각이...듭니다.^^;

번호 제 목 글쓴이 날짜
2696043 제이쿼리 .scroll() 관련 질문드립니다 이거이름임 2025-05-26
2695984 마크업상으로 하단에 있으나 우선적으로 이미지파일을 다운로드받는 방법 (1) 들꿈 2025-05-25
2695934 tr 속성값 (9) 새 2025-05-25
2695905 ASP로 개발됐을 때 css가 달라져요 ㅠㅠ (4) 슬아라 2025-05-24
2695878 form을 이용한 다른 페이지로 넘기는 방법을 알려주세요 (1) 핫파랑 2025-05-24
2695844 저기 암호화 및 복호화 프로그램.. 만들어볼려는대 (2) 한빛 2025-05-24
2695814 [질문] PDA에서 애플릿이 가능한가요? (1) 봄시내 2025-05-24
2695785 웹 설정 도와줄분 화이트캣 2025-05-23
2695730 갑자기 기억이 안나는데 accesskey 속성.. 빛나라 2025-05-23
2695702 [질문] Java 버전 차이에 의한 오류?!! (2) 검사 2025-05-23
2695672 자바 임베디드 쪽으로 배우고 싶은데요..질문이요.. (1) 뽀그리 2025-05-22
2695647 헉! 이클립스(v3.1)에서 발생되는 널포인트 익셉션? ;;; (3) 아빠몬 2025-05-22
2695586 IFRAME 캐싱 질문 봄나비 2025-05-22
2695498 [질문]실행가능한 jar파일.. 정말 이해가 안가네요... ㅡㅜ;; 터1프한렩 2025-05-21
2695468 자바랑 이클립스에서요.. 스킬 2025-05-21
2695375 Mysql 연동하는 자바 질문있습니다. 아리솔 2025-05-20
2695319 파워포인트 파일을 저장할 수 있을까요? 시윤 2025-05-19
2695289 [질문]Tween 값의 정도를 알고 싶습니다. 타마 2025-05-19
2695238 c 와 c++의 시작 (10) ChocoHoilc 2025-05-18
2695215 탑메뉴의 repeat-x .배경이 두가지에요ㅠ ㅠ 널위해 2025-05-18
<<  이전  1 2 3 4 5 6 7 8 9 10  다음  >>

수다닷컴 | 여러분과 함께하는 수다토크 커뮤니티 수다닷컴에 오신것을 환영합니다.
사업자등록번호 : 117-07-92748 상호 : 진달래여행사 대표자 : 명현재 서울시 강서구 방화동 890번지 푸르지오 107동 306호
copyright 2011 게시글 삭제 및 기타 문의 : clairacademy@naver.com