Block list với float 2
Block list với image float trái và phải, dành cho thiết kế sole tạo ấn tượng.
Danh sách khối (block list) dạng float
Danh sách dạng khối sử dụng float: right cho image bên phải.
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } img { vertical-align: bottom; } .blockList { border-top: 1px dotted #ccc; padding-top: 10px; } .blockList li { border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 10px; zoom: 1; /* clearfix sử dụng cho <li> */ } .blockList li:after { /* clearfix sử dụng cho <li> */ clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } .blockList li p.image { float: left; width: 80px; } .blockList li div.block { margin-left: 90px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */ } .blockList li.right p.image { float: right; } .blockList li.right div.block { margin: 0 90px 0 0; /* vừa margin-right vừa phục hồi margin-left về 0 */ } .blockList li a { color: blue; text-decoration: none; } .blockList li a:hover { text-decoration: underline; } .blockList li div.block p { text-align: justify; } </style> </head> <body> <ul class="blockList"> <li> <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p> <div class="block"> <h3><a href="http://hocwebchuan.com">Tiêu đề 01</a></h3> <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </li> <li class="right"> <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p> <div class="block"> <h3><a href="http://hocwebchuan.com">Tiêu đề 02</a></h3> <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </li> <li> <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p> <div class="block"> <h3><a href="http://hocwebchuan.com">Tiêu đề 03</a></h3> <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </li> <li class="right"> <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p> <div class="block"> <h3><a href="http://hocwebchuan.com">Tiêu đề 04</a></h3> <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </li> </ul> </body> </html>