<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><frameset rows="300,*"><frame name="a" src="1.html" /><frameset cols="33%,33%,33%"><frame name="b" src="2.html" /><frame name="c"src="2.html"/><frame name="d" src="1.html" /></frameset></frameset></html>效果图希望在这个的基础之上，在下面再加 二排 每排三个 的窗口。
1 回答
淡雅的默
TA贡献102条经验 获得超139个赞
给你树下九宫格的思路吧，希望对你有用！
九宫格，就是给人的感觉是一个元素内成比例从左往右依次排列，当超过3个的元素自动换行到下一行，
那么问题，一般九宫格里面的元素都有自己的margin值（就是给人单独元素的视觉）；这个时候如果是margin-left：10px，那么第一个怎么办，第四个怎么办，第七个怎么办，如果对每1、4、7、11...等元素都进行一次设置margin-left:0的话太麻烦，如果是margin-right，那么也是一样的道理；
所以我们这个时候就需要套两个元素，如
<div class="con"> <div class="con_c"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </div> </div>
这样的格式；就以手机端为例；
外面的con类宽度为100%； 里面的con_c宽度为120%；总之要大于三个li标签宽度加上margin宽度的总合就行；
然后li给他display:inline-block流式布局；或者直接float:left也行，高度设置一下；宽度每一个li=32%；margin-right:1.3%，差不多就行；
注意这里con_c元素需要设置溢出隐藏；
然后你就发现这里面的九个元素就是依次排列下来了，每当1、4、7、11就会换行
添加回答
举报
0/150
提交
取消