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>