左侧固定 右侧自适应
2018-06-24 01:56:11来源:未知 阅读 ()
本文地址:http://www.cnblogs.com/veinyin/p/7617722.html
左侧浮动,右侧margin-left值为左侧宽即可。
由于左侧浮动,左侧盒子脱标,右侧仍在标准文档流,右侧盒子宽度是剩下的宽度,效果为右侧自适应。
右侧内容可居中,常规用法即可。
需注意的是左侧浮动,右侧不能继续浮动。
如果两边盒子都浮动,由于右侧盒子宽度不固定,默认为内容撑开宽度。
若浮动,极有可能在第二排,如果想要把右侧内容居中,实现十分困难。
在@普通男孩 的提示下发现示例没给全,下面给出示例详细实现
1 <body class="clearfix"> 2 <div class="left"> 3 我是左侧内容 4 </div> 5 <div class="right"> 6 我是右侧标准流内容 7 <div class="cont"> 8 我是右侧居中内容 9 </div> 10 </div> 11 </body>
1 <style> 2 html, body { /* 初始化,同时给高度 100%,便于后面内容设高 */ 3 margin: 0; 4 padding: 0; 5 height: 100%; 6 } 7 8 .clearfix::after { /* 伪元素清除浮动 */ 9 content: ''; 10 display: block; 11 height: 0; 12 line-height: 0; 13 visibility: hidden; 14 clear: both; 15 } 16 17 .left { /* 左侧盒子左浮,给边框方便查看盒子位置 */ 18 border: 2px solid #333; 19 width: 300px; 20 height: 98%; 21 float: left; 22 } 23 24 .right { /* 右侧宽度自适应,块级默认占据整个屏幕宽 */ 25 border: 2px solid #333; 26 margin-left: 310px; /* 给个左外边距,把左盒子位置空出来 */ 27 height: 98%; 28 position: relative; /* 右侧居中内容 父盒子相对定位 */ 29 } 30 31 .right .cont { /* 右侧水平垂直居中盒子 定位实现 */ 32 position: absolute; 33 top: 50%; /* 子盒子左上角定位在父盒子正中间 */ 34 left: 50%; 35 transform: translate(-50%, -50%); /* 给个偏移量,让子盒子中心在父盒子中心处 */ 36 } 37 </style>
上面是一个左侧固定,右侧自适应,同时右侧内容居中的示例,效果图如下
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html的语法 3
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 纯CSS实现带返回顶部右侧悬浮菜单 2020-03-07
- 如何实现两列固定与一列自适应 2020-03-01
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