หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

ห้าวิธีในการแก้ปัญหาการปรับความสูงของคอลัมน์ (ความสูงของคอลัมน์เท่ากัน)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 00:49:55

ห้าวิธีในการแก้ปัญหาการปรับความสูงของคอลัมน์ (ความสูงของคอลัมน์เท่ากัน)

ต่อไปนี้เป็นเนื้อหาที่ยกมา:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ความสูงเท่ากัน (วิธีการมีความสูงของคอลัมน์เท่ากัน)</title>
<style type="text/css">
ร่างกาย{
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
ขนาดตัวอักษร: 12px;
ตระกูลฟอนต์: Arial, Helvetica, sans-serif;
ความสูงของเส้น: 140%;
พื้นหลัง:#E7DFD3;
-
#กลาง{
ความกว้าง: 580px;
ลอย:ซ้าย;
พื้นหลัง:#FFFFFF;
การจัดแนวข้อความ: ซ้าย;
-

#ส่วนหัว,#ส่วนท้าย{
พื้นหลัง: #E8E8E8;
ความกว้าง: 750px;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
#ไซด์ซ้าย{
ความกว้าง: 580px;
ลอย: ซ้าย;
ตำแหน่ง:ญาติ;
ขอบซ้าย:-580px;
-
#ไซด์ไรท์{
ความกว้าง: 170px;
ลอย: ขวา;
ตำแหน่ง:ญาติ;
ระยะขอบ: 0 -170px 0 0;
พื้นหลัง: #F0F0F0;
-

#ส่วนท้าย{
ชัดเจน:ทั้งสอง;

-
h1,h2,ที่อยู่,p{
ระยะขอบ: 0;
ช่องว่างภายใน: .8em;
-
h1,h2{ขนาดตัวอักษร: 20px;}

</สไตล์>
<script type="text/javascript">
// <![ซีดีต้า[

ฟังก์ชั่นสลับเนื้อหา (ชื่อ n) {
var i,t='',el = document.getElementById(ชื่อ);
ถ้า (!el.origCont) el.origCont = el.innerHTML;

สำหรับ (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
-

-
</สคริปต์>
</หัว>
<ร่างกาย>

<div id="ส่วนหัว">
<h1>หัว</h1>
<div id="กลาง">
<div id="sideright">
<div id="ด้านข้างซ้าย">
<h2>ด้านข้างซ้าย</h2>
<p><a href="javascript:toggleContent('sideleft',1)">ความยาวเริ่มต้น</a>&nbsp;&nbsp;<a href="javascript:toggleContent('sideleft',2)">หน้าที่ยาวขึ้น< /a></p>
<p> ไม่ใช่เรื่องง่ายที่จะเปลี่ยนจากวิธีการออกแบบแบบพิกเซลคงที่ไปเป็นแนวทางการออกแบบที่ยืดหยุ่นและสัมพันธ์กัน แต่หากใช้อย่างถูกต้อง อาจเป็นทางเลือกที่เป็นธรรมชาติในการเพิ่มการเข้าถึงและความสะดวกในการใช้งานโดยไม่ต้องเสียสละการออกแบบ </p>
<p> พิกเซลเป็นจุดที่ไม่สามารถปรับขนาดได้บนหน้าจอคอมพิวเตอร์ และ
h3 เป็นสี่เหลี่ยมจัตุรัสขนาดคำ เนื่องจากมีการเปลี่ยนแปลงขนาดตัวอักษร h3
หน่วยสัมพันธ์ที่แสดงขนาดข้อความที่ผู้ใช้ต้องการ </p>
<p> การพิมพ์แบบตายตัวอาจง่ายกว่า เนื่องจากมีน้อยกว่าที่ต้องพิจารณาหากขนาดยังคงเท่าเดิม อย่างไรก็ตาม หากคุณใช้วิธีการออกแบบที่ยืดหยุ่น คุณสามารถใช้ <a href="http://product.yesky.com/catalog/345/" class="bluekey" target="_blank">จอภาพของคอมพิวเตอร์ได้อย่างเต็มที่ </a> และเบราว์เซอร์ </p>
<p> บางทีคุณอาจต้องการให้เว็บไซต์ของคุณปรากฏในลักษณะใดลักษณะหนึ่ง แต่สิ่งที่ผู้ใช้ของคุณต้องการเห็นอาจแตกต่างกัน สิ่งใดก็ตามที่บังคับกับผู้ใช้จะบ่อนทำลายความสะดวกในการใช้งาน และส่งผลเสียต่อความสำเร็จของเว็บไซต์ </p>
<p> ไม่ใช่เรื่องง่ายที่จะเปลี่ยนจากวิธีการออกแบบแบบพิกเซลคงที่ไปเป็นแนวทางการออกแบบที่ยืดหยุ่นและสัมพันธ์กัน แต่หากใช้อย่างถูกต้อง อาจเป็นทางเลือกที่เป็นธรรมชาติในการเพิ่มการเข้าถึงและความสะดวกในการใช้งานโดยไม่ต้องเสียสละการออกแบบ </p>
</div>

<h2>ชิดขวา</h2>
<p> ไม่ใช่เรื่องง่ายที่จะเปลี่ยนจากวิธีการออกแบบแบบพิกเซลคงที่ไปเป็นแนวทางการออกแบบที่ยืดหยุ่นและสัมพันธ์กัน แต่หากใช้อย่างถูกต้อง อาจเป็นทางเลือกที่เป็นธรรมชาติในการเพิ่มการเข้าถึงและความสะดวกในการใช้งานโดยไม่ต้องเสียสละการออกแบบ </p>
<p> พิกเซลเป็นจุดที่ไม่สามารถปรับขนาดได้บนหน้าจอคอมพิวเตอร์ และ
h3 เป็นสี่เหลี่ยมจัตุรัสขนาดคำ เนื่องจากมีการเปลี่ยนแปลงขนาดตัวอักษร h3
หน่วยสัมพันธ์ที่แสดงขนาดข้อความที่ผู้ใช้ต้องการ </p>
<p> การพิมพ์แบบตายตัวอาจง่ายกว่า เนื่องจากมีน้อยกว่าที่ต้องพิจารณาหากขนาดยังคงเท่าเดิม อย่างไรก็ตาม หากคุณใช้แนวทางการออกแบบที่ยืดหยุ่น คุณสามารถใช้ประโยชน์จากหน้าจอและเบราว์เซอร์ของคอมพิวเตอร์ของคุณได้อย่างเต็มที่ </p>
<p> บางทีคุณอาจต้องการให้เว็บไซต์ของคุณปรากฏในลักษณะใดลักษณะหนึ่ง แต่สิ่งที่ผู้ใช้ของคุณต้องการเห็นอาจแตกต่างกัน สิ่งใดก็ตามที่บังคับกับผู้ใช้จะบ่อนทำลายความสะดวกในการใช้งาน และส่งผลเสียต่อความสำเร็จของเว็บไซต์ </p>
</div></div>
<div id="ส่วนท้าย">
<ที่อยู่>
ส่วนท้าย
</ที่อยู่>
<p>การผลิต: <a href="http://homepage.yesky.com">หน้าเว็บ Tao Bar</a></p>
</div>
</ร่างกาย>
</html>
<ภาษาสคริปต์ = "จาวาสคริปต์">
var ตอนนี้ = วันที่ใหม่ ();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</สคริปต์>
<โนสคริปท์>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>