การแก้ปัญหากรณี div หลักไม่ขยายตามความสูงของ div ย่อย ใน Firefox

01 April 2009

CSS Code

<style type="text/css">
div.cDiv{
	margin:auto;
	width:75%;
	background-color:#EAEAEA;
	border:1px solid #999999;
}
div.lDiv{
	float:left;
	width:200px;
	background-color:#FFCC99;
	border:1px solid #999999;	
}
</style>

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>

</div>

ปัญหาจะเกิดกับ Firefox การแก้ปัญหา โดยเพิ่ม

<div style="clear:both"></div>
ไว้ก่อนปิด div หลัก

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>
<!--เพิ่มบรรทัดข้างล่างนี้ก่อนปิด div หลัก-->
<div style="clear:both"></div>
</div>








บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

25 Sep 08 สี Colours การใช้งานสี อ่าน 2955 25 Sep 08 สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS อ่าน 2818 25 Sep 08 CSS แทรกโค๊ดในเว็บโดยมีหมายเลขบรรทัดกำกับ อ่าน 2743 27 Sep 10 วิธีใช้ css จัดรูปแบบ เนื้อหา contents ที่ต้องการแสดง บน google map อ่าน 2706 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2649 08 Oct 08 การกำหนด class มากกว่าหนึ่ง อ่าน 2450 06 Aug 10 ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์ อ่าน 2430 25 Sep 08 การทำให้หน้าเว็บของเราสามารถดูได้อย่างเดียว อ่าน 2388 23 Feb 11 การแบ่งหน้า การพิมพ์ สำหรับข้อมูลต่อเนื่อง ด้วย css อย่างง่าย อ่าน 2139 22 Feb 11 ตัวอย่าง การสร้างรูปแบบ ตารางรายงานข้อมูล ด้วย css อย่างง่าย อ่าน 2107 14 Feb 09 การระบุการใช้งาน css ค่าใดค่าหนึ่ง อย่างเฉพาะเจาะจง (specificity) อ่าน 1965 04 Oct 11 การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย อ่าน 848 06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 683

บทความคนเข้าอ่านวันนี้

30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2765 08 Nov 09 เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table อ่าน 7452 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3462 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3201 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3529 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4861 26 Mar 09 กำหนดข้อความเริ่มต้นให้กับ input text ด้วย jquery อย่างง่าย อ่าน 3200 08 Oct 08 การกำหนด class มากกว่าหนึ่ง อ่าน 2450 19 Feb 10 สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย อ่าน 3449 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 2946 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 862 22 Jan 11 การอัพเดท สถานะ facebook อัตโนมัติ ผ่านทางอีเมลล์ อ่าน 1906 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2213 16 Aug 09 jQuery UI คือ อะไร อ่าน 4303 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 3191 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1039 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 1963 13 Feb 09 แปลงข้อความเป็นตัวเล็ก toLowerCase ตัวใหญ่ toUpperCase ด้วย javascript อ่าน 1877 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17118 13 Jul 10 วิธี load xml ไฟล์ และ แบ่งหน้า ด้วย php อย่างง่าย อ่าน 2775
จำนวนผู้เยี่ยมชม 777892
คน 2012 © Copyright ninenik.com. All rights reserved.