티스토리 뷰

목표는 아래와 같다
구현해봤던 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; }
댓글