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


200901 Jul

แก้ปัญหาความสูง 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/

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด ส่วนลด lazada true

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด

Finger Style Guitar
(2)

รวม DVD แนวเพลง Finger Style Guitar ต่างๆ

fingerstyle
(1)

DVD และ VCD เพลงแนว Finger Style Guitar

pair bluetooth
(1)

วิธีการ Pair อุปกรณ์ Bluetooth ต่าง ๆ