你的位置:首页 > 软件开发 > 网页设计 > 左侧固定 右侧自适应

左侧固定 右侧自适应

发布时间:2017-10-01 21:00:15
左侧浮动,右侧margin-left值为左侧宽即可。由于左侧浮动,左侧盒子脱标,右侧仍在标准文档流,右侧盒子宽度是剩下的宽度,效果为右侧自适应。右侧内容可居中,常规用法即可。需注意的是左侧浮动,右侧不能继续浮动。如果两边盒子都浮动,由于右侧盒子宽度不固定,默认为内容撑开宽度。若浮 ...

左侧浮动,右侧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 }

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

原标题:左侧固定 右侧自适应

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录