求HTML CSS排版技巧 打个比方，我的PHP会循环输出一个Class 为abc的盒子（DIV
求HTMLCSS排版技巧打个比方，我的PHP会循环输出一个Class为abc的盒子（DIV），请问如何让其每三个盒子为一行，如果PHP输出多于3个的话就自动排到下一行，而...
求HTML CSS排版技巧 打个比方，我的PHP会循环输出一个Class 为abc的盒子（DIV） ，请问如何让其每三个盒子为一行，如果PHP输出多于3个的话就自动排到下一行，而且和第一行对齐，我新手，如果你事先给我几十个盒子我也许排整齐，但是PHP没输出前，盒子是不存在的，请问大神，如何写CSS，谢谢
展开
展开全部
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.main{width:920px;overflow:hidden;margin:0 auto;}
.boxWrap{width:930px;}
.box{width:300px;height:300px;margin:0 10px 10px 0;float:left;background:red;}
</style>
</head>
<body>
<div class="main">
<div class="boxWrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
总体原则就是
最外层有一个给定宽度，高度自适应的盒子,宽度为三个盒子的宽度加上2个右margin---main
中间有一个宽度为三个盒子宽度加上右margin值的盒子--boxWrap
最后里面是循环的那些浮动的小盒子--box
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先你确定一排3个的话，就把一排的宽度定的和3个盒子加起来的宽度一样或者大于3个盒子的宽度，但是要小于4个盒子的宽度，然后给这个盒子float:left;左浮动一下，在最后一个盒子后面加上一段<div style="clear:both"></div>或者这个层的底部就行了。
更多追问追答
追问
不行，我写的时候就写一个盒子，其他的盒子都是PHP循环输出来的呢
没有最后一个盒子！！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
浮动左呀。这和php没什么关系。纯css就可以做到了
追问
但是PHP有时会输出好几十个盒子的！第一行放不开，盒子会自动到第二行？
追答
你的盒子指的是div吧？div的排列就是会换行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.abc{
width:33%;
float:left;
}
追问
这样 就会自动换行了？
追答
自己试下不就知道了，这种问题有必要骗你吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
