Equal Height Columns with jQuery | กำหนดความสูง Div ให้เท่ากันในกรณี content บรรทัดไม่เท่ากัน

แก้ปัญหาความสูง Div ให้เท่ากันในกรณี content บรรทัดไม่เท่ากัน

มีเวลา update ความรู้และอะไรใหม่แล้ว ก้อเลยมานำเสนอสำหรับท่านที่เคยประสบปัญหา การกำหนดความสูงของ Content ใน div หรือ Elemet แบบอื่น ๆ ในกรณีที่ content ไม่เท่ากัน แล้วทำให้ความสูงไม่เท่ากัน แต่วันนี้เราสามารถแก้ปัญหานี้ได้ด้วยการ Jquery function... แต่ผมก้อบอกก่อนว่าวิธีนั้นมีแก้ไขมากมายคุณอาจจะเลือกวิธีเหมาะสมสำหรับ Website คุณเพื่อแก้ไขการแสดงผลให้ถูกต้องใครไม่มี Jquery ก้อไป Load มาแล้วก้อนำ function นี้มาเสียบ ก้อใช้งานได้เลย จากตัวอย่าง function นี้ก้อ มีการใช้

1. Sets a variable, “tallest,” to zero.
2. Loops through each of the items class หรือ Id
3. ถ้าความสูง มากกว่า tallest กำหนดค่าความสูงให้ใหม่ แล้ววนไป Loop จนหมด
4. group.height(tallest); Set ความสูงโดยให้เท่ากับตัวที่มีค่าความสูงมากที่สุด จบ


function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

ส่วนนี้ 2 เป็นส่วนนำ function มาใช้งานเราดูกัน เป็นการกำหนดให้ Element class recent-article ทั้งหมดมีความสูงเท่ากัน equalHeight($(".recent-article")); ผลลัพธ์

$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});
มาดูตัวอย่างกัน http://www.cssnewbie.com/example/equal-heights/
Tags
• css
• javascript
• jquery
• หน้าแรก Knowledge Base