ใช้แอตทริบิวต์ clear ของ css เพื่อให้ได้เอฟเฟกต์การตัดข้อความโฆษณา

คุณเคยเห็นโฆษณาของเว็บไซต์ขนาดใหญ่วางตรงกลางเนื้อหาเพื่อตัดข้อความหรือไม่ โดยทั่วไป โฆษณาของเว็บไซต์ขนาดเล็กทั่วไปจะวางได้เฉพาะที่จุดเริ่มต้นหรือจุดสิ้นสุดของเนื้อหาเท่านั้น บางทีระบบ cms ของเว็บไซต์ขนาดใหญ่อาจมีก็ได้ ฟังก์ชันนี้ พื้นฐานของ cms ที่ใช้กันทั่วไปโดยเว็บไซต์ขนาดเล็กของเรา ไม่มีฟังก์ชันดังกล่าว เนื่องจากเป็นไปไม่ได้ที่จะเพิ่มแท็กโฆษณาลงในแท็กเนื้อหาโดยอัตโนมัติ เว้นแต่คุณจะแก้ไขด้วยตนเองเมื่อเพิ่มบทความซึ่งไม่น่าเบื่อ

ฉันไม่เคยคิดที่จะใช้ css เพื่อควบคุมมันเลย สาเหตุหลักมาจากฉันไม่ได้คาดหวังว่าจะมีแอตทริบิวต์ที่ชัดเจน วันนี้ฉันบังเอิญเห็นคำแนะนำและพบว่าการใช้การตัดข้อความนั้นง่ายมาก

ตัวอย่างรหัส:

<div class="ข่าว">
<div style="float:left;height:300px;width:0">เลเยอร์ว่างที่มีความกว้าง 0 โดยใช้ความสูงของเลเยอร์นี้เพื่อควบคุมตำแหน่งบนและล่างของเลเยอร์โฆษณา</div>
<div style="float:left;height:250px;width:250px;clear:left;">โค้ดโฆษณา</div>
</div>

สิ่งสำคัญอยู่ที่บทบาทของ clear:left การล้างมีคุณลักษณะสามประการ: clear:both, clear:left และ clear:right ซึ่งระบุถึงการล้างบล็อกลอยทั้งสองด้าน ด้านซ้าย และด้านขวาตามลำดับ การเพิ่ม clear:left ให้กับเลเยอร์โฆษณาหมายความว่าเลเยอร์จะไม่ลอยสัมพันธ์กับเลเยอร์ว่างอีกต่อไป และจะเลื่อนลงด้านล่าง เยี่ยมมาก 555

มาเปรียบเทียบกัน:

<div class="ข่าว">
<div style="float:left;height:300px;width:100px;พื้นหลัง:#CCC;">เพิ่มความกว้างและพื้นหลังเพื่ออำนวยความสะดวกในการสังเกตเอฟเฟกต์</div>
<div style="float:left;height:250px;width:250px;">ถ้าคุณลบโฟลตที่ชัดเจนออก คุณจะเข้าใจความหมายของมัน</div>
</div>

หากคุณเพิ่มอันนี้:

<style>.news img,.news table{clear:both;}</style> //ให้รูปภาพและตารางในเนื้อหาไม่บังโฆษณา

น่าเสียดายที่การทดสอบข้างต้นพบว่ามีเพียง IE เท่านั้นที่เป็นไปได้ Firefox และ Opera ให้ผลลัพธ์ที่แตกต่างกัน ผลของ IE คือรูปภาพจะเลื่อนลงโดยอัตโนมัติเมื่อพบกับเลเยอร์โฆษณา Firefox จะไม่เลื่อนลง แต่จะไม่ครอบคลุมเลเยอร์โฆษณา เพราะเลเยอร์โฆษณาอยู่ด้านหน้า ในโอเปร่า ภาพจะไม่เลื่อนลงและจะบังเลเยอร์โฆษณาด้วย ตลกดี

ปรับปรุงอีกครั้ง:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //ให้รูปภาพและตารางอยู่ด้านล่างโดยอัตโนมัติ

ในที่สุดก็เสร็จแล้ว มันค่อนข้างสมบูรณ์แบบ และเอฟเฟกต์ของเนื้อหาโฆษณาโดยรอบก็เสร็จสมบูรณ์แล้ว :)

//2008-02-29, แก้ไขโดย: คืออะไร

ลืมเพิ่ม

มีคนถามว่าควรล้อมข้อความด้านบนและล่างขวาหรือเปล่า ผมจึงเปลี่ยนดังนี้