Fixheight cho các thành phần con
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>