Fixheight cho các thành phần con

Trở về

  • 2,817

Fixheight cho các thành phần con chỉ với một vài thao tác đơn giản.

fixHeight: canh đều chiều cao cho các thành phần con

Trong file fixHeight.js đã hỗ trợ canh đều chiều cao cho các thành phần con bên trong các khối nằm ngang nhau, bằng cách sử dụng các class tương ứng cho các thành phần muốn canh đều chiều cao.

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 {
    background-color:#dcfcfa;
}
ul li h3 a {
    color:#f00;
    text-decoration:none;
}
ul li p {
    background-color:#fce4dc;
}
</style>
</head>
<body>
<ul class="fixHeight">
    <li>
        <h3 class="fixHeightChildTitle"><a href="https://hocwebchuan.com">Tiêu đề 01</a></h3>
        <p class="fixHeightChildText">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 class="fixHeightChildTitle"><a href="https://hocwebchuan.com">Tiêu đề tiêu đề tiêu đề tiêu đề tiêu đề tiêu đề 02</a></h3>
        <p class="fixHeightChildText">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 class="fixHeightChildTitle"><a href="https://hocwebchuan.com">Tiêu đề tiêu đề tiêu đề tiêu đề tiêu đề 03</a></h3>
        <p class="fixHeightChildText">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 class="fixHeightChildTitle"><a href="https://hocwebchuan.com">Tiêu đề 04</a></h3>
        <p class="fixHeightChildText">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, 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

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.