Block list với float

Trở về

  • 1,367

Một kỹ thuật float đơn giản, giúp block list có cấu trúc gọn hơn.

Danh sách khối (block list) với float

Danh sách khối với float, với cách sử dụng "margin âm" ta không cần sử dụng class để phục hồi khoảng cách cho <li>, tuy nhiên cách sử dụng này không sử dụng được khi chiều cao bên trái nhiều hơn chiều cao nội dung bên phải, cách này tất cả các trình duyệt chạy như nhau, ta hãy xem thử cách này:

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; }
/* cho tag bao ngoài có chiều rộng cụ thể */
div.wrapper { width: 630px; border: 1px dashed red; }
.blockList {
    list-style: none; /* bỏ style cho danh sách */
    zoom: 1; /* clearfix sử dụng cho <ul> */
    margin: 0 -10px -10px 0;
}
.blockList li {
    float: left;
    margin: 0 10px 10px 0;
    width: 310px;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList:after,
.blockList li:after { /* clearfix sử dụng cho <ul> và <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 a {
    color: blue;
    text-decoration: none;
}
.blockList li a:hover {
    text-decoration: underline;
}
.blockList li div.block p {
    text-align: justify;
}
</style>
</head>
<body>
<div class="wrapper">
<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>
    <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>
    <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>
</div>
</body>
</html>

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

 

Download file để thực hành

Sử dụng cách khác với class cho thành phần bên phải để phục hồi lại trạng thái margin-right, đây cũng là cách thường dùng cơ bản, chạy được cho tất cả trình duyệt, khuyết điểm duy nhất là phải tạo thêm class, khó khăn trong việc code dành cho web động.

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; }
/* cho tag bao ngoài có chiều rộng cụ thể */
div.wrapper { width: 630px; border: 1px dashed red; }
.blockList {
    list-style: none; /* bỏ style cho danh sách */
    zoom: 1; /* clearfix sử dụng cho <ul> */
}
.blockList li {
    float: left;
    margin: 0 10px 10px 0;
    width: 310px;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li.right {
    float: right;
    margin-right: 0;
}
.blockList:after,
.blockList li:after { /* clearfix sử dụng cho <ul> và <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 a {
    color: blue;
    text-decoration: none;
}
.blockList li a:hover {
    text-decoration: underline;
}
.blockList li div.block p {
    text-align: justify;
}
</style>
</head>
<body>
<div class="wrapper">
<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>
</div>
</body>
</html>

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

 

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.