查看新闻/公告--[备忘]多个div横向排列，宽度变化，自动折行的实现方法

[心缘地方]同学录

首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版

登录系统:用户名: 密码: 如果要讨论问题，请先注册。

[备忘]多个div横向排列，宽度变化，自动折行的实现方法
上一篇:[转帖]应不应该使用inline-block代替float 下一篇:[备忘]spring的bean里获取ServletContext的方法
添加日期：2015/1/20 10:09:31	快速返回返回列表	阅读3315次
一般的方法是使用float： <div style="width:100%;height:900px;border:1px solid"> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">11111</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">22222</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">33333</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">44444</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">55555</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;float:left">66666</div> </div> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 另一种方法是将每个网格显示为inline-block（行内块元素），再设置其父容器的text-align:justify（两端对齐），这样的话每行的网格都会根据父容器宽度自适应个数和间距： <div style="width:100%;height:900px;border:1px solid;text-align:justify"> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">11111</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">22222</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">33333</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">44444</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">55555</div> <div style="width:300px;height:300px;border:1px solid red;margin:5px;display:inline-block">66666</div> </div> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 可能还有一些问题，看这个文章： http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify%E4%B8%8B%E5%88%97%E8%A1%A8%E7%9A%84%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E5%B8%83%E5%B1%80/ http://targetkiller.net/inline-block/ 大概就是说：用span，别用div。结束标签连着写，别折行。最后一行加个透明的行。供参考： <div>销售排行</div><br/> <div style="width:100%;text-align:justify"> <c:forEach var="oneRow" items="${topSellList}" varStatus="sta"> <span style="width:180px;height:200px;display:inline-block;vertical-align:top;"> <a href="${ctx}/mobile/showProduct?id=${oneRow.id}"> <img src="/fileStore/productImage/${oneRow.productPic1}" width="100" height="100" style="margin: 5px" /><br/>${oneRow.productName} </a> <div style="color: #de4b03;"><i class="iconRMB">￥</i>${oneRow.sellPrice}</div></span> </c:forEach> <!-- 解决最后一行不撑满的问题 --> <span style="display:inline-block; width:100%; height:0; overflow:hidden;"></span> </div> <div style="clear:both"></div>

评论 COMMENTS
没有评论 No Comments.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码（不区分大小写） Validation Code: (not case sensitive)	看不清？点这里换一张！(Change it here!)
	评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.

CopyRight © 心缘地方 2005-2999. All Rights Reserved