左侧固定 右侧自适应

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

 

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

 

posted @ 2017-10-01 20:14  yuhui_yin  阅读(757)  评论(2)  编辑  收藏  举报