九宫格实现问题
<!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>
效果图
希望在这个的基础之上，在下面再加 二排 每排三个 的窗口。
big_person浏览 1744回答 1
1回答
-
淡雅的默
给你树下九宫格的思路吧，希望对你有用！九宫格，就是给人的感觉是一个元素内成比例从左往右依次排列，当超过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就会换行
随时随地看视频慕课网APP
CSS3
Html/CSS
JavaScript