haobien
25-05-2009, 19:34
Mình post bài nhầm box nên post lại sang đây.
Mình có một tình huống như hình sau (mình up hình bị fail hoài nên đành để link này, thông cảm):
http://hosting06.imagecross.com/image-hosting-15/79342.JPG
Mình làm như sau:
//HTML
<div class="test">
<div class="left">
<img src="images/test.jpg" width="100" height="100" />
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
//CSS
.test{
width:400px;
}
.left{
width:100px;
height:100px;
float:left;
}
.right{
margin-left:110px;
background:#CCCCCC;
}
Vì yêu cầu của trường hợp này là k để chiều rộng cố định cho "right" nên mình phải dùng margin-left cho nó, và text ở phần right có thể dài ngắn tùy ý . Với html và css như trên thì các browser đều hiển thị đúng, chỉ có IE6 là k đúng, như hình:
http://hosting06.imagecross.com/image-hosting-15/12621.JPG
Chịu khó nhìn kỹ 1 chút các bạn sẽ thấy 3 dòng text ở cuối nó nhích sang bên trái khoảng 3px. Mình đã thử nhìu cách nhưng k sửa được, mình k thể quy định chìu cao của hình theo text được vì độ dài text có thể thay đổi tùy thích, cũng k thể quy định chìu rộng của right để float:right cho nó được yêu cầu là như thế. Bạn nào có thể cho mình bít lý do tại sao IE6 lại bị như vậy được k? Và cách sửa thì càng tốt.
Cảm ơn các bạn đã xem tin, chúc một ngày tốt lành.
Mình có một tình huống như hình sau (mình up hình bị fail hoài nên đành để link này, thông cảm):
http://hosting06.imagecross.com/image-hosting-15/79342.JPG
Mình làm như sau:
//HTML
<div class="test">
<div class="left">
<img src="images/test.jpg" width="100" height="100" />
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
//CSS
.test{
width:400px;
}
.left{
width:100px;
height:100px;
float:left;
}
.right{
margin-left:110px;
background:#CCCCCC;
}
Vì yêu cầu của trường hợp này là k để chiều rộng cố định cho "right" nên mình phải dùng margin-left cho nó, và text ở phần right có thể dài ngắn tùy ý . Với html và css như trên thì các browser đều hiển thị đúng, chỉ có IE6 là k đúng, như hình:
http://hosting06.imagecross.com/image-hosting-15/12621.JPG
Chịu khó nhìn kỹ 1 chút các bạn sẽ thấy 3 dòng text ở cuối nó nhích sang bên trái khoảng 3px. Mình đã thử nhìu cách nhưng k sửa được, mình k thể quy định chìu cao của hình theo text được vì độ dài text có thể thay đổi tùy thích, cũng k thể quy định chìu rộng của right để float:right cho nó được yêu cầu là như thế. Bạn nào có thể cho mình bít lý do tại sao IE6 lại bị như vậy được k? Và cách sửa thì càng tốt.
Cảm ơn các bạn đã xem tin, chúc một ngày tốt lành.