ปกติแล้วคอลัมน์ที่เราแบ่งนั้น พื้นหลังมักจะเป็นสีขาว ซึ่งอาจจะยังไม่ดึงดูดความสนใจเท่าที่ควร เราจึงมีการปรับแต่งคอลัมน์ให้ดูมีความน่าสนใจมากยิ่งขึ้น ด้วยการใส่สี กำหนดความกว้าง และกำหนดตำแหน่งให้กับคอลัมน์ รวมถึงนำคำสั่ง word-wrap:break-word; ซึ่งเป็นการจัดข้อความไม่ให้ล้นกรอบ ซึ่ง ทำให้ข้อความ ไม่ยาวมากจนเกินไป
ตัวอย่างโค้ดที่เขียน
โค้ด: เลือกทั้งหมด
<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 (40.15 KiB) Viewed 705 times
บทที่ 2 CSS3 Borders ตอนที่ 3 ใช้รูปแบบทำเป็นกรอบรูป
บทที่ 10 CSS3 Multiple Columns ตอน 1 การแบ่งคอลัมน์