สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css

02 April 2010 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

css layout

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css layout

ดูแล้ว 27,410 ครั้ง

UPDATE! อัพเดทล่าสุด 28-02-2020
- แบ่งคอลัมน์โดยใช้ css flex layout เพิ่มเติมที่ 1

ต่อไปนี้เป็นเทคนิคการใช้ css หลายตัว มากำหนดให้ ความสูงของคอลัมน์ ใน layout สูงเท่ากัน โดยอาศัยความสูง
ของ div ที่มีความสูงมากที่สุดมาปรับใช้งาน

ตัวอย่าง HTML Code

<div class="container">
  <div class="rightback">
    <div class="contentback">
      <div class="leftback">
        <div class="leftsidebar">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
        </div>
        <div class="content">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
         </div>
        <div class="rightsidebar">        
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
	</div>
      </div>
    </div>
  </div>
</div>

ตัวอย่าง CSS Code

<style type="text/css">
body{
	padding:0;
	margin:0;
	font-family:tahoma;
	font-size:12px;
}

.container{ /* กำหนดส่วนของ เนื้อหา ทั้งหมด */
	width: 900px; /* กำหนดความกว้าง ของทั้ง 3 คอลัมน์รวมกัน */
	margin:auto;
}
.rightback{ /* กำหนดพื้นหลัง คอลัมน์ ด้านขวา */
	background-color: #CCFFCC;
	overflow:hidden;
}
.contentback{  /* กำหนดพื้นหลัง คอลัมน์ ตรงกลาง */
	background-color:#CCCCFF;
	right: 250px;    /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftback{  /* กำหนดพื้นหลัง คอลัมน์ ด้านซ้าย */
	background-color: #FFFFCC;
	right: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */	
}
.rightback,.contentback,.leftback{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	position:relative;
	width:100%;
}
.leftsidebar{ /* กำหนดสำหรับคอลัมน์ ด้านซ้าย */
	width: 250px;   /* กำหนดความกว้าง ของคอลัมน์ ด้านซ่าย */
}
.content{  /* กำหนดสำหรับคอลัมน์ ตรงกลาง */
	width: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */
}
.rightsidebar{  /* กำหนดสำหรับคอลัมน์ ด้านขวา */
	width: 250px; /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftsidebar,.content,.rightsidebar{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	overflow:hidden;
	position:relative;
	left: 650px; /* ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย ในที่นี้ 900-250  */	
}
</style>

การนำไปใช้งาน
ให้นำค่าที่ต้องการไปกำหนดใน css ด้านบน ตรงส่วนที่ คอมเม้นไว้ ซึ่งมีค่าต่อไปนี้
1.ความกว้างทั้งหมด
2.ความกว้างคอลัมน์ด้านซ้าย
3.ความกว้างคอลัมน์ตรงกลาง
4.ความกว่้างคอลัมน์ด้านขวา
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย

สมมติ ดังนี้
ต้องการสร้าง layout 3 คอลัมน์ กว้างทั้งหมด 900 px คอลัมน์ซ้าย กว้าง 200 คอลัมน์ขวากว้าง 200
ตรงกลางกว้าง 500 สามารถกำหนดได้ดังนี้
1.ความกว้างทั้งหมด=900px
2.ความกว้างคอลัมน์ด้านซ้าย=200px
3.ความกว้างคอลัมน์ตรงกลาง=500px
4.ความกว่้างคอลัมน์ด้านขวา=200px
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย=700px

นำค่าที่ได้ไปแทนใน css ด้านบน

ต้วอย่าง

สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 28-02-2020

แบ่งคอลัมน์โดยใช้ css flex layout

ปัจจุบัน เราสามารถสร้าง layout และแบ่งคอลัมน์ได้ง่ายขึ้น โดยใช้งาน css flex layout

ดูตัวอย่างโค้ดด้านล่างเป็นแนวทาง ดูตัวอย่าง DEMO 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="app.css"> -->
    <style type="text/css">
        .my-flex-wrap-1,
        .my-flex-wrap-2,
        .my-flex-item{
            display: flex;
            margin: 0;
            padding: 0;
        }
        .my-flex-wrap-1{
            width: 50%;
        }
        .my-flex-wrap-2{
            width: 100%;
            justify-content: start;
            flex-wrap: wrap;
        }
        .my-flex-item{
            background-color: wheat;
            width: calc(100% / 3);
            margin-top: 5px;
        }  
    </style>
</head>
<body>
    <h1>Flex Layout</h1>
    <div class="my-flex-wrap-1">
        <ul class="my-flex-wrap-2">
            <li class="my-flex-item">1</li>
            <li class="my-flex-item">2</li>
            <li class="my-flex-item">3</li>
            <li class="my-flex-item">4</li>
            <li class="my-flex-item">5</li>
            <li class="my-flex-item">6</li>
            <li class="my-flex-item">7</li>
            <li class="my-flex-item">8</li>
        </ul>
    </div>
</body>
</html>