码迷,mamicode.com
首页 > 其他好文 > 详细

左侧固定 右侧自适应

时间:2017-10-01 21:13:17      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:span   absolute   ati   注意   nsf   log   适应   code   height   

左侧浮动,右侧margin-left值为左侧宽即可。

由于左侧浮动,左侧盒子脱标,右侧仍在标准文档流,右侧盒子宽度是剩下的宽度,效果为右侧自适应。

右侧内容可居中,常规用法即可。

需注意的是左侧浮动,右侧不能继续浮动。

如果两边盒子都浮动,由于右侧盒子宽度不固定,默认为内容撑开宽度。

若浮动,极有可能在第二排,如果想要把右侧内容居中,实现十分困难。

 

1 .left {
2     width: 851px;
3     height: 567px;
4     float: left;
5 }
 1 .right {
 2     margin-left: 851px;
 3     height: 567px;
 4     position: relative;
 5 }
 6 
 7 .right .cont {
 8     position: absolute;
 9     top: 50%;
10     left: 50%;
11     transform: translate(-50%, -50%);
12 }

上面是一个左侧固定,右侧自适应,同时右侧内容居中的示例。

左侧固定 右侧自适应

标签:span   absolute   ati   注意   nsf   log   适应   code   height   

原文地址:http://www.cnblogs.com/veinyin/p/7617722.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!