css中怎样实现两列布局?在实际的网页设计项目中,两列布局还是比较常用的,实现也并不困难,因此下文小编就给大家分享一下css中两列布局的实现方法,需要的朋友可以参考。
两列布局分为两种,一种是左侧定宽、右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间)。
原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样,可以给元素设置vertical-align:top调整。
缺点:由于父元素设置了font-size为0,子元素内文字不会显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; font-size:0; } .left{ display: inline-block; width: 100px; height: 200px; background-color: red; vertical-align: top; } .right{ display: inline-block; width: calc(100% - 100px); height: 400px; background-color: blue; vertical-align: top; } </style> </head> <body> <div class="box"> <div class="left"> <span>1234</span> </div> <div class="right"> <span>1234</span> </div> </div> </body> </html>
原理:两个元素设置浮动,右侧自适应元素宽度使用calc函数计算
缺点:父元素需要清除浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; } .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ float: left; width: calc(100% - 100px); height: 400px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="left"> <span> 123adadadddddddddddddddddddddddddddddddddddddddd </span> </div> <div class="right"></div> </div> </body> </html>
原理:左侧定宽元素浮动,右侧自适应元素设置margin-left的值大于定宽元素的宽度即可
缺点:父元素需要清除浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; } .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="left"> <p>1234</p> </div> <div class="right"> <p>1234</p> </div> </div> </body> </html>
原理:父元素设置overflow:hidden,左侧定宽元素浮动,右侧自适应元素设置overflow:auto创建BFC
缺点:左侧元素的内容如果超过设定宽度会重叠到右侧元素上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; overflow: hidden; } .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ overflow: auto; height: 400px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="left">111111111111111111111111</div> <div class="right">111111111111111111111111111111111111111111111</div> </div> <div class="right"></div> </body> </html>
原理:父元素相对定位,左侧元素绝对定位,右侧自适应元素设置margin-left的值大于定宽元素的宽度
缺点:父元素设置了相对定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; position: relative; } .left{ position: absolute; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
原理:父元素设置display:flex,自适应元素设置flex:1
缺点:存在兼容性问题,IE10以下不支持
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; display: flex; } .left{ width: 100px; height: 200px; background-color: red; } .right{ flex: 1; height: 400px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
严格来讲,并不算两个元素都是自适应,只是将上面的定宽改为由子元素撑开而已
原理和上面一样,只是左侧元素的宽度没有设置,由子元素撑开
原理:父元素display:table,左侧元素外围用一个div包裹,该div设置display:table-cell,width:0.1%(保证最小宽度),左侧元素内部设置margin-right,右侧元素设置display:table-cell。
缺点:IE7及以下不支持,当display:table时,padding失效,父元素的line-height属性失效,当display:table-cell时,margin失效。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ display: table; width: 100%; } .box{ display: table-cell; width: 0.1%; } .left{ margin-right: 20px; background-color: red; height: 200px; } .right{ display: table-cell; background-color: blue; height: 300px; } </style> </head> <body> <div class="parent"> <div class="box"> <div class="left">126545453dddddddd453453453</div> </div> <div class="right">12121</div> </div> </body> </html>
原理、缺点同上面的flex布局
原理:父元素设置display:grid,grid-template-columns:auto 1fr;(这个属性定义列宽,auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位,表示剩余空间做等分)grid-gap:20px(行间距)
缺点:兼容性太差,IE11都不支持,谷歌57以上才可以
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ display:grid; grid-template-columns:auto 1fr; grid-gap:20px } .left{ background-color: red; height: 200px; } .right{ height:300px; background-color: blue; } </style> </head> <body> <div class="parent"> <div class="left">1111111111111111111111111</div> <div class="right"></div> </div> </body> </html>
现在大家对css中怎样实现两列布局应该都有所了解了吧,上述示例有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习CSS有帮助,想要了解更多请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595