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

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

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

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

table.gif

 

เวลาเขียน ก็เขียนให้มันเรียงลงมา ปกติ ไม่ต้องไปพยายามเรียงซ้ายไปขวาแบบนี้ล่ะ ทำภาพให้ดูง่ายเฉยๆ ภายใน <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   จะได้ รูปร่าง แบบนี้

table_cell.gif

โอ้วว มันยืดตามกันแล้ว  เหอๆ แต่มันได้เฉพาะ เบราเซอร์ในตระกูล 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

  • Share/Bookmark
Categories: CSS techniques
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ปัจจุบันออกจากงานประจำมาทำ e-commerce เต็มตัว ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. likhi1
    September 10th, 2007 at 21:04 | #1

    “ปัญหาคือความสูงที่ต้องยืดตามกัน ก็ถูกคำนวณด้วย property expression คือใช้ตัว จาวาสคริป เข้ามาช่วยในการคำนวณ ความสูง ของกล่อง ”

    อยู่ไหนอ่ะตัว javascript ???
    อ่านแล้วงงๆ สงสัยต้องลองทำ….ไว้ว่างๆอ่ะ

    ปล. บทนี้ยากแฮะ

  2. September 11th, 2007 at 09:10 | #2

    เยี่ยมมากๆครับ หามานานแล้ว วิธีนี้:”>:”>

  3. September 11th, 2007 at 13:18 | #3

    It’s so great :d Thanks.:)>-

  4. Petch
    September 13th, 2007 at 11:17 | #4

    ช่วยอธิบายเรื่องนี้ให้ชัดเจนหน่อยคับ ผมทดลองทำแล้วก็ยังไม่ได้ เมื่อเราเพิ่มขึ้นมาอีกแถวหนึง ใน IE ก็มีปัญหา แก้แล้วก็ยังไม่ดีมากนัก ปัญหานี้ยังสู้ตารางไม่ได้อยู่คับ ผมคิดว่าถ้าทำCSS ได้เกือบเท่าตารางเมื่อไหร่ จะมีคนทำ Webstandard มากขึ้น ยังไงก็ช่วยกันพัฒนาน่ะคับ

  5. September 13th, 2007 at 13:17 | #5

    อันนี้ใช้สำหรับ layout ซ้ายกลางขวาอะครับ อย่าไปใช้แทนตารางเลยครับ มันคนละอย่างกัน ส่วนของตารางใช้ table ดีอยู่แล้วครับ ถ้าจะทำ css div ให้เป็นตาราง ก็คงมีกระอักเลือดกันมั่งละครับ :(|)

  6. RookieDZ
    September 26th, 2007 at 19:44 | #6

    ครับใช่แล้วล่ะคับ ผมว่าเราไม่จำเป็นต้องสร้าง Div ในรูปแบบตารางเลยน่ะคับ

  7. April 26th, 2008 at 20:31 | #7

    อยากถามเกี่ยวกับปัญหาที่เกิดกับ Browser IE ครับ Text ที่อยู่ในแต่ละบล็อกมันล้นออกมา โดยเฉพาะบล๊อกอันล่างสุด ไม่ทราบว่าสาเหตุเกิดจากการใช้ Float หรือการใช้ Div Class ที่ซ้ำซ้อนกันหรือเปล่าครับ ผมลองใช้ Clear-all แล้ว ก็หายไปบ้างนิดหน่อย ทำอย่างไรจึงจะแก้ปัญหานี้ได้ครับ หรือให้เปลี่ยนไปใช้ Ul li dl dd เป็นโครงสร้างของ Block แทนครับ

  8. April 26th, 2008 at 22:55 | #8

    ผมว่า พิมพ์แล้วไม่เคาะ space บ่อยๆหรือป่าวครับ มันถึงยาวจนล้นออกมา ลองใส่ css ตัวนี้ที่กล่องดูเผื่อช่วยได้ครับ white-space:nowrap;

  9. ธนันท์รัฐ
    July 18th, 2009 at 09:52 | #9

    ลองกับ ie8 หรือยังครับ มันเพี้ยนไปเยอะเลยครับ

  10. December 6th, 2009 at 13:30 | #10

    ข้อมูลมีประโยชน์มากครับ

  11. December 6th, 2009 at 13:30 | #11

    แนวนี้ชอบมากเลยครับ

  12. February 25th, 2010 at 21:02 | #12

    ลำบาก เพราะความสูงเหมือนกัน คงจะปล่อยมันอะ :-?

  1. No trackbacks yet.