ทำ DIV ให้สูงเท่ากัน แก้ปัญหาขนาด DIV ในหน้าไม่เท่ากัน

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อยเช่นเคย ไม่ว่าทุกจะทำเว็บ Blog หรือเว็บ Ecommerce ปัญหาที่มักจะเจอกันบ่อย ๆ นั้นก็คือ ขนาด DIV ไม่เท่ากัน ดังนั้นเราจึงนำเสนอเทคนิคการแก้ปัญหาง่าย ๆ ด้วยการใช้งาน matchHeight js นั้นเอง

ตัวอย่างการใช้งาน matchHeight js

See the Pen matchHeight js example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

หลักการทำงานของ js ตัวนี้ก็คือ หา DIV ที่มีความสูงมากสุดในแถวนั้น ๆ (Row) จากนั้นทำการกำหนดค่าให้กับ DIV อื่น ๆ ในแถวเดียวกันให้มีความสุดเท่ากับ DIV ที่มีความสูงสูงที่สุด

ตัวอย่างการเขียนโค้ด

เริ่มที่ เรียกใช้งาน  Javascript file ใน Tag <header>....</header>

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js' crossorigin = "anonymous"></script>

ตัวอย่างการสร้างวางตำแหน่ง DIV

<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>

ตัวอย่าง CSS (โดยกำหนดความสูงของ DIV ให้แตกต่างกัน)

<style>
.container{
  float:left;
  display:inline-block;
  width:100%;
  height:auto;
  padding:25px;
}

.box{
  float:left;
  width:50px;
  border:1px solid #ccc;
  margin-right:15px;
}

#box1{
  height:20px;
  background-color:#F00; 
}

#box2{
  height:30px;
  background-color:#4cc203; 
}

#box3{
  height:50px;
  background-color:#00c4ff; 
}
</style>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
$(document).ready(function(){
$('.container .box').matchHeight();
})
</script>

ขอบคุณความรู้จาก : https://www.cssscript.com/