左侧固定 右侧自适应

Posted 2020-10-09 VeinYin

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

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