需要实现横向两列布局:左列固定,右列自适应的效果,如下图:
HTML代码:
XML/HTML Code复制内容到剪贴板- <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代码:
CSS Code复制内容到剪贴板- 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代码:
CSS Code复制内容到剪贴板- 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代码:
CSS Code复制内容到剪贴板- 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代码:
CSS Code复制内容到剪贴板- 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网页布局之混合布局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“横向两列布局(左列固定,右列自适应)的4种CSS实现方式”评论...
更新日志
2024年05月29日
2024年05月29日
- 鸣潮联觉等级怎么提升 联觉等级升级攻略
- 甄妮《皆因你的爱》华星40金唱片[WAV分轨]
- 陈奕迅《时代曲》华星40金唱片)[WAV分轨]
- 蔡依林《2004BornToBeAStar(超级珍藏世纪精选2CD)》[WAV整轨]
- 《碧海黑帆》新赛季预告公布 又有免费试玩生怕你不玩
- 刘德华《天王巨星经典情歌典藏2CD》[WAV+CUE][1.3GB]
- 斯琴格日乐《强烈直接的音乐方式 姿态》[WAV+CUE][500MB]
- 王菲《收录12首 只爱陌生人》[WAV+CUE][540MB]
- 鸣潮清芬鱼汤制作材料是什么 清芬鱼汤制作攻略分享
- 鸣潮卡卡罗和忌炎怎么选择 卡卡罗和忌炎强度对比攻略
- 鸣潮撞金止行阵任务怎么完成 撞金止行阵流程攻略
- 刘德华1991-不可不信......缘[香港复黑版][WAV]
- 蔡依林《爱情任务》[WAV分轨]
- 蔡国权《同名专辑》1987[FLAC+CUE]
- 《命运2:终焉之形》6月5日上线 新视频提前发布!