站长下载:中国新一代站长门户网!

软件提交最近更新热门排行站长论坛

当前位置:首页 > 站长教程 > 建站经验 > CSS教程 > 横向两列布局(左列固定,右列自适应)的4种CSS实现方式

横向两列布局(左列固定,右列自适应)的4种CSS实现方式

时间:2019-01-11人气:383来源:原创我要评论(0)

需要实现横向两列布局:左列固定,右列自适应的效果,如下图:

HTML代码:

    <DOCTYPE html>       <html>       <head>       <meta charset="UTF-8">       <title>测试练习</title>       </head>       <body>       <div class="parent">             <div class="side">侧栏</div>           <div class="main">主栏</div>       </div>       </body>       </html>          

方法一(推荐):使用asolute属性实现,需要注意:固定宽的列的高度>自适应宽度列的高度

CSS代码:

    body{            margin:0;            padding:0;            font-size:30px;            font-weight:bold;            }        .parent{            text-align:center;            line-height:200px;        }            .side{            position:absolute;left:0;top:0;            width:200px;            height:200px;            background:red;        }        .main{            margin-left:210px;            background:blue;            height:200px;        }   

方法二:通过设置float属性(使纵向排列的块级元素,横向排列)及margin属性(设置两列之间的宽度)

CSS代码:

    body{            margin:0;            padding:0;            font-size:30px;            font-weight:bold;            }        .parent{            text-align:center;            line-height:200px;        }        .side{            width:200px;            height:200px;            float:left;            background:red;        }        .main{            height:200px;            margin-left:210px;            background:blue;        }   

方法三:使用Flex布局

CSS代码:

    body{                margin:0;                padding:0;                font-size:30px;                font-weight:bold;                }            .parent{                text-align:center;                line-height:200px;                display:flex;            }             .side{                width:200px;                height:200px;                background:red;                margin-right:10px;            }            .main{                background:blue;                height:200px;                flex:1;            }​     

方法四:利用BFC不与浮动元素重叠的特性

CSS代码:

     body{            margin:0;            padding:0;            font-size:30px;            font-weight:bold;            }        .parent{            text-align:center;            line-height:200px;        }        .side {          width: 200px;          height: 100px;          float: left;          background: red;          margin-right: 10px;        }        .main {          /* 创建BFC   */         overflow: hidden;          background: blue;          height: 100px;        }    

以上就是本文的全部内容,希望对大家熟练掌握CSS布局技巧有所帮助。

更多阅读内容:

学习DIV+CSS网页布局之一列布局

学习DIV+CSS网页布局之两列布局

学习DIV+CSS网页布局之三列布局

学习DIV+CSS网页布局之混合布局

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 有关内部链接布局的一些小建议

    有关内部链接布局的一些小建议  网站中的每个页面都需要有最新的文章发布部分,最新的文章部分应该从实时更新。也就是说,刚刚发布了一篇文章,该文章在网站中所有页面的最新文章部分中都可见。  抢手引荐版块:抢手引荐规
  • 网站的结构和关键词到底该如何布局

    网站的结构和关键词到底该如何布局  网站页面用divcss布局,尽量少用table布局,因table布局决议页面体积比DIV大,并且不利于搜索引擎剖析其间内容的散布和优先联系,有很大或许会使蜘蛛掉入蜘蛛圈套里,对搜索引擎不友好;HTM

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号 | 浙公网安备 42011102000245号

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!