左侧浮动,右侧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
(#换成@)。