Block list với float 2

Trở về

  • 1,557

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>

Hiển thị trình duyệt:

 

Download file để thực hành

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.