使用浮动水平安排DIV很容易.例如:
<div style="width: 500px;"> <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div> <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div> <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div> <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div> <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div> </div>
这将产生:
但是如何横向和纵向排列DIV?在这种情况下,如何在有空的空间(黄色和蓝色DIV下)移动红色和紫色DIV?
解决方法
假设您正在使用一组动态的任意大小的对象,没有纯CSS方法来实现这一点.如果符合以下条件,您可以使用CSS3多列布局:
>您只需要支持现代浏览器.
>所有对象都可以排列成等高的组.
这里,物体以300px的高度排列.
<div id="blocks"> <div style="height: 100px; background-color: yellow;"></div> <div style="height: 200px; background-color: blue;"></div> <div style="height: 300px; background-color: green;"></div> <div style="height: 200px; background-color: red;"></div> <div style="height: 160px; background-color: purple;"></div> </div> #blocks { -moz-column-count: 3; -moz-column-gap: 0; -webkit-column-count: 3; -webkit-column-gap: 0; column-count: 3; column-gap: 0; width: 450px; } #blocks div { width: 150px; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。