티스토리 뷰

웹프로그래밍/css

이미지 문장과 함께 있을때 float:left 적용 display:inline

공허공자 2010. 10. 18. 15:27
목표는 아래와 같다
구현해봤던 CSS
.main02 { font:normal 9pt dotum,Verdana; border-bottom:1px dotted lightgray; margin:0 0 15px 0; padding:0 0 10px 0; }
.main02 .pic { width:90px; height:60px; overflow:hidden; border:1px solid silver; float:left; margin:0 15px 5px 0; }
.main02 .pic img { width:100%; border:0; }
.main02 .title { width:350px; overflow:hidden; font:bold 12pt dotum,Verdana }
.main02 .subtitle { margin:6px 0 0 0; color:gray; font:bold 10pt dotum,Verdana; }
.main02 .byline { color:gray; width:100px; float:right; }

하지만 아래와 같이 되어버렸다. (위는 오직 Firefox 에서만 동작하였다.)

모든 브라우저에서 적용하려면 제목에 display:inline; 만 추가하면 된다. 
.main02 { font:normal 9pt dotum,Verdana; border-bottom:1px dotted lightgray; margin:0 0 15px 0; padding:0 0 10px 0; }
.main02 .pic { width:90px; height:60px; overflow:hidden; border:1px solid silver; float:left; margin:0 15px 5px 0; }
.main02 .pic img { width:100%; border:0; }
.main02 .title { display:inline; width:350px; overflow:hidden; font:bold 12pt dotum,Verdana }
.main02 .subtitle { margin:6px 0 0 0; color:gray; font:bold 10pt dotum,Verdana; }
.main02 .byline { color:gray; width:100px; float:right; }
저작자표시

'웹프로그래밍 > css' 카테고리의 다른 글

IE, FF 에서의 padding, width 차이  (0) 2011.01.05
IE와 non-IE에서 width와 padding 다른문제 ie hack으로 조율하기  (0) 2010.12.23
제목 more 를 CSS로 위치시키기  (0) 2010.06.30
CSS Watermarks로 이미지 불펌방지  (0) 2010.06.23
이미지와 문장 혼합 컨텐츠에서의 CSS Overflow의 사용법  (0) 2010.06.23
공유하기 링크
댓글