[T]issues 2.1

Faux Columns using jQuery

เคยเจอปัญหานี้กันหรือเปล่า… ออกแบบ layout แบบสองคอลัมน์ (หรือมากกว่า) โดยใช้ div + float แต่พอเจอ content มากๆ ความสูงของ div มันกลับไม่เท่ากัน ทำให้ไม่สามารถใส่ background-color ให้กับคอลัมน์ที่สั้นกว่าได้ (ส่วนมากจะเป็น navigation menu) Faux Columns คือนิยามของเรื่องข้างบนที่ A List Apart ให้ไว้ – เขาใช้การใส่ background image สลับข้าง คือให้เป็นพื้นหลังของข้างที่ยาวกว่า ผมมีวิธีแก้ปัญหาอีกทางหนึ่ง โดยใช้ JavaScript เข้ามาช่วย สมมุติว่ามีโค้ดแบบนี้ HTML <div id="wrapper"> <h1 id="header">Site Header</h1> <div id="main"> <div id="sidebar"> <!– Main Navigation–> <ul id="navigation"> … </ul> </div> <div id="content"> … </div> <div class="clear"/> </div> </div> <div id="footer"> … </div> CSS #wrapper { margin: 0 auto; width: 780px; } #sidebar { float: left; width: 200px; } #content { float: [...]