ทำ layout ให้สูงเท่ากัน ทุกคอลัมน์

จากตอน “การจัดการกับความสูง” ได้มีคอมเม้น ของคุณปีโป้ ได้เข้ามาถามไว้ว่า จะทำ กล่องที่มีเนื้อหาไม่เท่ากัน ให้สูงเท่ากันได้อย่างไร ถ้าจะตอบแบบ ไม่ต้องคิดมาก ก็คือ ใช้ table สิ เหอๆๆ แต่ ถ้าคนเคยทำ css แล้วจะมีอาการโรคจิต ชนิดหนึ่ง ที่จะต้องพยายาม ทำทุกอย่างในหน้าเว็บ โดยไม่ใช้ table ให้ได้ ราวกับว่า การมี table สักอันอยู่ในหน้าเว็บ เป็นความพ่ายแพ้ และเป็นที่เหยียดหยามอย่างมาก จากเพื่อนร่วมงาน ดังนั้นเรามาดูวิธี ทำโดยไม่ใช้ table แต่ทำแบบ table เอ๊ะยังไง????

table แบบเดิมเราเขียนกันแบบนี้

เวลาเขียน ก็เขียนให้มันเรียงลงมา ปกติ ไม่ต้องไปพยายามเรียงซ้ายไปขวาแบบนี้ล่ะ ทำภาพให้ดูง่ายเฉยๆ ภายใน <table> ก็จะประกอบด้วย <tr> = table row และใน 1 <tr> ก็จะประกอบไปด้วย <td> = table data cell ดังนั้นเราจะเขียน css ตามรูปแบบนี้กัน
เขียน html ดังนี้

<div class=”equal”>
     <div class=”row”>
          <div class=”one”>
             aaa<br><br>
            divland.com layout
            <br><br>
             equal height
          </div>
          <div class=”two”>
             bbb
          </div>
          <div class=”three”>
             ccc
          </div>
     </div>
</div>

เขียน css ดังนี้

.equal {
    display:table;
 width:600px;
 border-spacing:10px;
 background:#f2f2f2;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
 background:#CCCC00;
 }
.row .one {    
width:200px;
}  
.row .two {    
width:200px;
}
.row .three {    
width:200px;
}

ส่วนนอกสุด คลาส .equal  ใส่ property  display:table  ถัดมาเป็น .row display:table-row  ส่วน .row div ก็คือ div ทุกตัวที่อยู่ใน .row ให้เป็น display:table-cell   จะได้ รูปร่าง แบบนี้

โอ้วว มันยืดตามกันแล้ว  เหอๆ แต่มันได้เฉพาะ เบราเซอร์ในตระกูล Mozilla Firefox นะครับ Opera ก็น่าจะได้  ส่วน IE ก็เหมือนเดิมครับ ไม่สามารถ อ่าน property display ทั้ง  3 ตัวนั้นได้   ดังนั้นแล้ว เราจึงต้องมีโค้ดพิเศษสำหรับ IE6 และ IE7

โดยใช้ Conditional comments for IE  

    <!–[if IE]>
<style type=”text/css”>
    .equal {
padding-bottom: 10px;
}

.row {  
padding:10px;
}

.row div {
float:left;
}

.row .one {   
width:190px;
}
.row .two {   
margin-left:10px;
width:190px;
}
.row .three { 
width:190px; 
margin-left: 10px; 
}

* html .row div { /* IE6 and older */
height: expression(parseFloat(row.offsetHeight)-10);
}

html>body #row div { /* IE7, and maybe later versions */
min-height: expression(parseInt(row.offsetHeight)-43);
}
</style>
<![endif]–>

โค้ดด้านบนนี้จะถูกอ่านเฉพาะใน IE เท่านั้น  หลักการก็ไม่มีอะไร มาก จับ กล่อง  float:left แล้วใส่ margin ให้มีระยะ ห่าง ปัญหาคือความสูงที่ต้องยืดตามกัน  ก็ถูกคำนวณด้วย property expression คือใช้ตัว จาวาสคริป เข้ามาช่วยในการคำนวณ ความสูง ของกล่อง

* html .row div { /* IE6 and older */
height: expression(parseFloat(row.offsetHeight)-10);
}

โค้ดส่วนนี้ จะถูกอ่านที่ IE6 และ ต่ำกว่า ค่า -10 สามารถเปลี่ยนแปลงได้ ในกรณีนี้ผมใช้ ระยะห่างแต่ละกล่องที่ 10 px ลองเปลี่ยนค่าแล้ว พรีวิว ดู ถ้าหากคุณใช้ระยะห่างเป็นอย่างอื่น

html>body #row div { /* IE7, and maybe later versions */
min-height: expression(parseInt(row.offsetHeight)-43);
}

โค้ดส่วนนี้ถูกอ่านที่ IE7 และเวอชั่นสูงกว่า  คำนวณค่าความสูงเช่นกัน ปรับค่า ข้างหลังได้

ในส่วนของโค้ด IE นั้น จะเห็นว่า ตรงบรรทัดของ IE7  จะมีการใช้ #row  ดังนั้นเราจะต้องเพิ่มส่วนของ html ด้วยดังนี้

<div class=”equal”>
  <div id=”row” class=”row”>
  <div class=”one”>
  aaa<br><br>
  divland.com layout
  <br><br>
  equal height
  </div>
  <div class=”two”>
  bbb
  </div>
  <div class=”three”>
  ccc
  </div>
  </div>
</div>

เท่านี้ก็จะได้ คอลัมน์ ที่สูงเท่ากัน แม้ว่าเนื้อหาไม่เท่ากัน
***** จะใช้ได้ กรณี ที่มีแถวเดียวเท่านั้นนะครับ ถ้าคุณเพิ่ม กล่องอีก 1แถว ใน IE จะผิดพลาดทันที เพราะมีการคำนวณโดยใช้ id มันจะสับสน ถ้าหากมีมากกว่า 1 เพราะฉะนั้น ใช้ในการทำ layout เท่านั้นนะครับ

ลองดูไฟล์ตัวอย่างได้ที่นี่ครับ  css-layout-equal-height.html

Related Articles

• ใช้ภาพแทน text link (9)
• โปรแกรมทำ css layout (18)
• เทคนิค css 1 บรรทัด (6)
• ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว (21)
• ทำ opacity ให้ cross browser (17)