求布局思路 求布局思路

图片说明

求 如图 流动布局（div+css）思路

大概思路简写 仅供参考

//自定义样式 去掉ul li默认样式 把a设置为块级元素 ul li{ list-style-type:none; }

代码被解析掉了 重新想了个思路

  ![图片说明](https://img-ask.csdn.net/upload/201508/04/1438692362_782842.jpg)
           <!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测试