左侧固定右侧自适应

最新推荐文章于 2022-08-15 14:15:48 发布

weixin_30381317

最新推荐文章于 2022-08-15 14:15:48 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/veinyin/p/7617722.html

版权

本文地址：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>

上面是一个左侧固定，右侧自适应，同时右侧内容居中的示例，效果图如下

转载于:https://www.cnblogs.com/veinyin/p/7617722.html

weixin_30381317

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左侧固定右侧自适应

本文地址：http://www.cnblogs.com/veinyin/p/7617722.html左侧浮动，右侧margin-left值为左侧宽即可。由于左侧浮动，左侧盒子脱标，右侧仍在标准文档流，右侧盒子宽度是剩下的宽度，效果为右侧自适应。右侧内容可居中，常规用法即可。需注意的是左侧浮动，右侧不能继续浮动。如果两边盒子都浮动，由于右侧盒子宽度不固定，默认为内容撑开宽...
复制链接

扫一扫