| Biểu diễn nội dung đẹp mắt |
|
|
|
|
Bài viết được đóng góp từ bạn Mai Trang. Không cần sử dụng table các bạn vẫn có thể biểu diễn các đoạn text, hình ảnh như hình dưới. ![]() <style type="text/css"> body { margin: 10px 0; padding: 0; color: #000; background-color: #fff; font-family: Georgia, serif; font-size: 100%; text-align: center; } .clear { clear: both; } .alignright { text-align: right; } .wide { background-color: #ffc; } .top { border-bottom: 1px solid #000; } .bottom { border-top: 1px solid #000; padding-bottom: 1px; } .testfloat { width: 80px; border: 2px solid #f90; background-color: #ffd; font-size: .8em; } .to-right { float: right; } .to-left { float: left; } .wrapper { margin: 0 auto; width: 762px; w\idth: 760px; /* C + L + R + 2 */ text-align: left; background-color: #cce; /* L */ border: 1px solid #000; } .outer1 { margin-left: 170px; background-color: #cfc; /* R */ } .outer2 { margin-right: 160px; background-color: #fcc; /* C */ border-left: 1px solid #000; border-right: 1px solid #000; } .outer0 { position: relative; margin-left: -171px; margin-right: -161px; } .wrap-cl { float: left; width: 599px; /* C + L + 1 */ } .center { float: right; width: 428px; /* C */ } .left { float: left; width: 170px; /* L */ margin-right: 1px; } .right { float: right; width: 160px; /* R */ margin-left: 1px; } /* previene allargamento floats (hidden) e problemi rendering left col (relative) in IE/Mac \*//*/ * html .inleft, * html .inright, * html .incenter { width: 100%; overflow: hidden; } * html .wrap-cl { position: relative; } /**/ .outer0 { word-wrap: break-word; } p, h1, h2, h3 { margin: 0 0 1em 0; border: 1px solid red; } </style> <!--[if lt IE 8]><style> .outer0, .wide, h2 { _height: 0; zoom: 1; } /* securite' */ .wrap-cl, .left { margin-right: -1px; } .center, .right { margin-left: -1px; } </style><![endif]--> </head> <body> <div class="wrapper"> <div class="left"> <div class="inleft"> <div class="testfloat to-right"> Here is a left float test box.Here is a left float test box. </div> <p>This is here to make this column longer. This is a <a href="#">test link</a>. This is here to make this column longer. This is a <a href="#">test link</a>. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. </p> </div> </div> </div> </body> Cảm ơn bạn Mai Trang
|






