PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

02 April 2010 By
layout css

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



ต่อไปนี้เป็นเทคนิคการใช้ 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 ให้ สูงเท่ากัน







Tags:: layout css






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง