用绝对定位实现横向两列布局
2018-06-24 01:03:41来源:未知 阅读 ()
用绝对定位实现横向两列布局
1.左边定宽列的高度>右边自适应宽度的列
2.用绝对定位会脱离标准文档流,会改变自己在原来页面中的格式,所以需要使左边的列比右边的列高,目的是可以撑开父元素,如果左边的列比右边的列低,那么右边的列会发生溢出,此时可能会想到给父元素设置overflow:hidden;但是会发现右边的列的内容被截断了,部分内容无法看到.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 .wrap{ 12 background:#777777; 13 position:relative; 14 overflow: hidden; 15 } 16 .border{ 17 background-color: #ccc; 18 border:1px solid black; 19 height:300px; 20 } 21 .left{ 22 width:200px; /*定宽的列*/ 23 height:600px; 24 } 25 .right{ 26 width:100%; /*自适应宽度的列*/ 27 height:300px; 28 position:absolute; 29 top:0px; 30 left:220px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="wrap"> 36 <div class="left border"></div> 37 <div class="right border"></div> 38 </div> 39 </body> 40 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:关于http-equiv
下一篇:css3注意小点
- 前端CSS五中元素定位类型 2020-06-01
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- 10.布局:两栏和主区域在后的三栏布局,实现侧边栏和主区域伪 2020-04-12
- 5.通过定位实现二级菜单 2020-04-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash