问题描述
- 求布局思路 求布局思路
-
求 如图 流动布局（div+css）思路
解决方案
大概思路简写 仅供参考
//自定义样式 去掉ul li默认样式 把a设置为块级元素
ul li{
list-style-type:none;
}
- 关键要确定每行显示几个a啊
关键要确定每行显示几个a啊
关键要确定每行显示几个a啊
关键要确定每行显示几个a啊
解决方案二：
代码被解析掉了 重新想了个思路
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.odiv{width:100%;padding:0;margin:0;}
.odiv a {
float: left;
width: 32%;
height:46px;
padding: 15px 0;
text-align: center;
display: block;
background: #ECECEC;
position: relative;
color: #000;
border-right: 1px solid #FCF7F7;
border-bottom: 1px solid #FCF7F7;
text-decoration: none;
/* border: 1px solid rgba(0,0,0,0.3);
border: 1px solid #2D343E;
border-right: 1px solid #333;
border-bottom: 1px solid #333; */
}
.btn-default {
color: #333;
border-color: rgba(0, 0, 0, 0.0);
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
/*border-radius: 4px;*/
border-radius: 0;
}
</style>
</head>
<body>
<div style="clear: both;margin-top:1px;">.</div>
<div class="odiv">
<p ><!-- 顶部导航 --></p>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">红楼梦</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">平凡的世界</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">曾国藩家书</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">大谋小计50年</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">阳光心态</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">一花一世界</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">商经</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">创业者在知乎</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">庄子</a>
<a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">人生若只如初见</a>
</div>
</body>
</html>
解决方案三：
这个代码编辑工具不习惯 如果看不到效果可以看这里 我发到我的博客里面了
http://www.cnblogs.com/zxyun/p/4703106.html测试
时间： 2024-08-24 17:00:09