Fixheight canh đều chiều cao

Trở về

  • 4,558

Việc canh đều chiều cao nhiều thành phần khác nhau gây không ít khó khăn cho chúng ta, đặc biệt khi thành phần có nhiều thành phần được phân bố ở nhiều hàng khác nhau. Việc nay sẽ trở nên đơn giản hơn khi sử dụng plugin fixHeight.

fixHeight: canh đều chiều cao cho các khối

Canh đều các thành phần cùng hàng ngang.
Cách sử dụng đơn giản, chỉ cần class=”fixHeight” cho thành phần cha.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="https://hocwebchuan.com/example/js/fixHeight.js"></script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul, li { list-style:none;}
ul li {
    float:left;
    width:280px;
    margin:0 10px 10px 0;
    padding:10px;
    border:1px solid #CCC;
}
ul li h3 a {
    color:#f00;
    text-decoration:none;
}
</style>
</head>
<body>
<ul class='fixHeight'>
    <li>
        <h3><a href="https://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 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, 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 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>
    </li>
    <li>
        <h3><a href="https://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>
    </li>
    <li>
        <h3><a href="https://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>
    </li>
    <li>
        <h3><a href="https://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, nội dung này sẽ xuống hàng</p>
    </li>
</ul>
</body>
</html>

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

Download file để thực hành

fixHeight: canh đều chiều cao cho các mục

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="https://hocwebchuan.com/example/js/fixHeight.js"></script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul, li { list-style:none;}
ul li {
    float:left;
    width:140px;
    margin:0 5px 10px 0;
    padding:5px;
    border:1px solid #CCC;
}
ul li h3 a {
    color:#f00;
    text-decoration:none;
}
</style>
</head>
<body>
<ul class='fixHeight'>
    <li>item list 01</li>
    <li>item list list list list list list list 02</li>
    <li>item list 03</li>
    <li>item list 04</li>
    <li>item list 05</li>
    <li>item list 06</li>
    <li>item list list list list list list list list list list list list list list list 07</li>
    <li>item list 08</li>
</ul>
</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.