CSS 浮动贴边显示实现盒子倒序

百科大全

更新时间：2025-10-05 09:54:4549

admin管理员组
文章数量:1794759

CSS 浮动贴边显示实现盒子倒序

利用浮动的贴边显示功能，设置盒子右浮动来实现盒子倒序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/CSS"> /* 浮动贴边显示元素依次贴边显示 */ div { width: 500px; height: 200px; border: 1px solid #000; background-color: #eee; margin-bottom: 50px; } span { width: 100px; height: 100px; } div span.no1 { background-color: green; } div span.no2 { background-color: yellow; } div span.no3 { background-color: pink; } div span.no4 { background-color: lightblue; } /*左浮动*/ .box1 span { float: left; } /*右浮动*/ .box2 span { float: right; } </style> </head> <body> <div class="box1"> <span class="no1">1</span> <span class="no2">2</span> <span class="no3">3</span> <span class="no4">4</span> </div> <div class="box2"> <span class="no1">1</span> <span class="no2">2</span> <span class="no3">3</span> <span class="no4">4</span> </div> </body> </html>

运行效果：

本文标签：贴边盒子 css

版权声明：本文标题：CSS 浮动贴边显示实现盒子倒序内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973782a124227.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。