首页  >  文章  >  web前端  >  css的自适应布局

css的自适应布局

php中世界最好的语言
php中世界最好的语言原创
2018-03-19 10:31:122127浏览

这次给大家带来css的自适应布局,css自适应布局的注意事项有哪些,下面就是实战案例,一起来看一下。

  首先,这个这么扯淡又装逼的名字不知道是谁起的,大意就是说:中间的内容随着浏览器宽度的不同,进行宽度自适应操作,而两边的内容固定宽度。

  来,上个代码演示一下:

 1     <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 overflow: hidden; 9             }10             .left {11                 float: left;12                 width: 100px;13                 background: #00f;14                 height: 180px;15             }16             .right {17                 float: right;18                 width: 150px;19                 background: #0f0;20                 height: 200px;21             }22             .center {23                 background: #B373DA;24                 height: 150px;25                 margin-left: 100px;26                 margin-right: 150px;27             }28         </style>29     </head>30     <body>31         <p class="wrap">32             <p class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</p>33             <p class="left">left,宽度固定,高度可固定也可以由内容撑开</p>34             <p class="right">right,宽度固定,高度可固定也可以由内容撑开</p>35         </p>36     </body>

  然后出来的效果是这样的:

  

  这个大块头的中间部分确实可以随着浏览窗口宽度的改变而改变:

  

  但是,卧槽,很猎奇啊有木有?!中间的主体叉在两侧内容上方是什么鬼?我们预期的是让它们在一个水平线上。将代码改为如下这样:

 1 <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 padding: 0 150px 0 100px; 9                 overflow: hidden;10             }11             .left {12                 float: left;13                 width: 100px;14                 background: #00f;15                 height: 180px;16                   margin-left: -100%;17                   position: relative;18                   left:-100px;19             }20             .right {21                 float: right;22                 width: 150px;23                 background: #0f0;24                 height: 200px;25                 margin-left: -150px;26                 position: relative;27                   right:-150px;28             }29             .center {30                 background: #B373DA;31                 height: 150px;32                 float: left;33                 width: 100%;34             }35         </style>36     </head>37     <body>38         <p class="wrap">39             <p class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</p>40             <p class="left">left,宽度固定,高度可固定也可以由内容撑开</p>41             <p class="right">right,宽度固定,高度可固定也可以由内容撑开</p>42         </p>43     </body>

  思路如下:.让左边的盒子上去,需要设置其左边距为负的中间盒子的宽度,也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。而让右边的盒子上去

需要设置其左边距为负的自己的宽度,也就是.right {margin-left:-150px;}。这样右盒子才可以在一行的最右边显示出自己。

  

  你是不是以为搞定了?其实并没有,因为中间主体部分的“center,可以”这几个字被挡住了,也就是说新来的这两个所谓“飞翼”把主体的内容挡住了。所以我们还需要把这两个小破翼给挪出去,但是又不能挪到屏幕外边,因为这样我们就看不到了。

  所以呢,我们做如下操作,利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。即.wrap{ padding: 0 150px 0 100px;}。这样就给这两个小破翼腾出了一点空间。

  

  最后,把左右两个小破翼分别“抽出来”,即

.left{ position: relative; left: -100px;}
.right{position: relative;right: -150px;}

  

  这样,这个什么什么双飞茶杯布局就完成了。

 

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Safari浏览器select下拉列表文字太长不换行的解决方法

HTML与CCS结合

Gulp命令生成精灵图

以上是css的自适应布局的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn