왜 이렇게 나오죠? 사진과 텍스트 정렬 문제좀???
소윤
!DOCTYPE htmlhtmlheadtitleHello, World!/titlestyle #listWrapper { width: 100%
} #list { width: 320px; list-style-type: none; }
.listIcon { float:left; margin-right: 10px; border:1px solid blue; }
.listText { position:relative; border:1px solid red; } .text1 {font-size:1em; font-weight:bold;} .text2 {font-size:0.8em; color:#313131} .text3 {font-size:0.7em; color:#9a9a9a}/style/headbody
div id=listWrapper ul id=list li div class=listIcon img src=http://t0.gstatic.com/images?q=tbn:ANd9GcQcpUbaFeTt3Y5Sh82zeazHqSLnfXu3thxCHGUJBNKSB8hCYaFTXA width=48br img src=http://googlemetalkradio.com/wp-content/uploads/2012/01/facebook_twitter_logo_combo1.png width=20 /div div class=listText span class=text1무궁화 꽃이 피었습니다./span br span class=text2무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다./span br span class=text32012년 3월 33일/span /div /li /ul /div /body/html
-----------------------
코드를 이렇게 작성했는데 그림 처럼 사진을 텍스트가 감싸는 형태로 나옵니다.원하는 것은 사진과 오른족 글이 따로 좌우로 배치되길 원하는데 안됩니다.텍스트는 브라우저에 따라 늘어나거나 해야 하고. 아래쪽으로도 내용에 따라 늘어냐야 합니다. 결과물을 확인하려고 width 값을 준겁니다.왜 Div 시작하는 시작점이 동일하죠? float; 하게 되면 이미지를 감ㅆ나 첫번째 Div 외편으로 두번재 텍스트를 감싼 div 가 그대로 붙어야 하는것 아닌가요??? 몇시간째 씨름중입니다.
-
도리도리
감사합니다. 말씀해주신 태그를 더해주니 해결이 된듯 합니다.
-
아지랑이
listText 에 overflow:hidden;zoom:1 추가해주세요. position:relative;는 불필요하면 삭제하시구요
-
소미
이경우 이 부부만 table로 짜는 것은안 좋은건가요???
-
그놈은멋있었다
그런데 width값을 줄수가 없는 상황이라서... 브라우저 크기에 따라 오른쪽 텍스트영역은 유동적으로 변경이 되어야 해서요??? 고정된 값을 줄수 있는건 사진이 들어간 div 뿐입니다. 많이들 이런식으로 되어 잇는것 같은데 실제 방법이 어렵네요?
-
곰돌이
.listIcon
.listText
둘다 float이 되야 합니다.
이후에 적당한 width값을 주세요.