CSS การปรับแต่งคอลัมน์

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS การปรับแต่งคอลัมน์

Post by GoB » 10/03/2015 4:06 pm

CSS การปรับแต่งคอลัมน์

ปกติแล้วคอลัมน์ที่เราแบ่งนั้น พื้นหลังมักจะเป็นสีขาว ซึ่งอาจจะยังไม่ดึงดูดความสนใจเท่าที่ควร เราจึงมีการปรับแต่งคอลัมน์ให้ดูมีความน่าสนใจมากยิ่งขึ้น ด้วยการใส่สี กำหนดความกว้าง และกำหนดตำแหน่งให้กับคอลัมน์ รวมถึงนำคำสั่ง word-wrap:break-word; ซึ่งเป็นการจัดข้อความไม่ให้ล้นกรอบ ซึ่ง ทำให้ข้อความ ไม่ยาวมากจนเกินไป



ตัวอย่างโค้ดที่เขียน

Code: Select all

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<style type="text/css">  
.column1_div{  	//ชื่อ class
    float:left;  	// การกำหนดตำแหน่ง สามารถให้ อยู่ ด้านซ้ายหรือขวา ก็ได้
    width:33%;  	//กำหนดความกว้าง ของคอลัมน์
    background-color:#FC6;  	//กำหนดสี
    word-wrap:break-word; 	//เป็นการจัดข้อความไม่ให้ล้นกรอบ
}  
.column2_div{  	//ชื่อ class
    float:left;  	// การกำหนดตำแหน่ง สามารถให้ อยู่ ด้านซ้ายหรือขวา ก็ได้
    width:33%;  	//กำหนดความกว้าง ของคอลัมน์
    margin:0px 2.0%;  	//ระยะห่างระหว่างคอลัมน์
    background-color:#C96;      //กำหนดสี 
    word-wrap:break-word; 	//เป็นการจัดข้อความไม่ให้ล้นกรอบ
}  
</style>  
</head>
  
<body>  
<div class="column1_div">กุหลาบเป็นดอกไม้ที่ได้รับความนิยมปลูกมากที่สุดชนิดหนึ่งของโลกที่มีต้นกำเนิดจากทวีปเอเชีย</div>  
<div class="column2_div">มะลิ เป็นไม้พุ่มหรือไม้เถาในวงศ์มะลิ มีประมาณ 200 ชนิด มีถิ่นกำเนิดในพื้นที่เขตร้อนและกึ่งเขตร้อนในแถบทวีปยุโรป</div>   
</body>  
</html> 
ผลลัพธ์ที่ได้
1.jpg
1.jpg (40.15 KiB) Viewed 346 times
บทความที่เกี่ยวข้อง
บทที่ 2 CSS3 Borders ตอนที่ 3 ใช้รูปแบบทำเป็นกรอบรูป
บทที่ 10 CSS3 Multiple Columns ตอน 1 การแบ่งคอลัมน์

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 14 guests