左侧固定 右侧自适应

2018-06-24 01:56:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html的语法 3

下一篇:css3弹性盒模型flex快速入门与上手1