双飞翼布局实现

举报
yxzking 发表于 2020/07/01 16:03:25 2020/07/01
【摘要】 布局实现的目的 1.三列布局,两端固定宽度(其实可以不用固定宽度),中间栏自适应。 2.中间栏优先渲染。 3.任意栏高度自由不限制 实现原理: html代码中,content部分首先要放在container的最前部分,然后是left,right. 1.将三者都设置 float:left 2.content设置 width:100% ...

 布局实现的目的      

1.三列布局,两端固定宽度(其实可以不用固定宽度),中间栏自适应。         

2.中间栏优先渲染。      

3.任意栏高度自由不限制      


实现原理:  

html代码中,content部分首先要放在container的最前部分,然后是left,right.    

1.将三者都设置 float:left   

2.content设置 width:100% 占满一行.  

3.此时content占满一行,所以要把left放到content所在行的最左边,使用 margin-left:-100%;(content的宽度)

right放到最右边,margin-left:-300px;(right自身的宽度)   

4.这时left回到content所在行的最左边,right回到content所在行的最右边,但会覆盖content内容的左右端,要把content内容挤到中间,所以在content下面添加一个div子元素,margin:0px;400px;


初始代码:

<!-- 三列布局,中间宽度自适应,两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高 -->

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>双飞翼布局实现</title>
  <style>
    .container {
      border: 2px solid  #0000ff;
      width:  1000px;
      overflow: hidden;

    }
    .content {
      background: red;
      float: left;
     
    }

    .left {
      background: green;
      float: left;
      width: 200px;
    }

    .right {
      background: pink;
      float: left;
      width: 300px;
    }
  </style>
</head>
<body>
  <div class="container">
  <div class="content">中间</div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>
</body>
</html>



中间被挤压了,给centent加一个width:100%,但是这时候出现了二行,当一个父元素宽度无法支撑一行的时候,它会换行.

飞翼模型成型了,现在要做的就是把left、right移上去到两边就好了

- 添加left左边 margin-left: -100% 会让左边第二行继续向左边界的left继续向左移动就跳到第一行的左边




这时候我们通过IE开发者工具查看left外边距为-1000px



- 添加right右边 margin-right:-300px 

因为上面我们添加了float,为了不影响布局,我们需要把right移动到第一行的尾部,而我们right的自身高为300px;所以我们向左移动-300px正好到第一行的尾部.


这时候会发现中间被挡住了怎么办了? left和right只是跑到content图层的上一层,遮挡住了content的内容,而不是排挤了content的内容。添加div子元素就可以看见被遮挡的内容.

- 在原来的content下面添加一个div元素conter 修改外间距上下为0px,左右为400px;这时候我们看下效果



- 中间二字就出来了,而且达到了我们想要的效果 我们通过开发者工具查看.



- 我们增大宽度为1200px;这时候你会发现二边羽翼不变,中间随着宽度的增大而增大,实现的双飞羽翼布局的效果。




完整代码:

<!-- 三列布局,中间宽度自适应,两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高 -->

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>双飞翼布局实现</title>
  <style>
    .container {
      border: 2px solid  #0000ff;
      width:  1000px;
      overflow: hidden;
  
    }
    .content {
      background: red;
      float: left;
      width: 100%; 
 
    }

    .left {
      background: green;
      float: left;
      width: 200px;
      margin-left: -100%;
   
    }

    .right {
      background: pink;
      float: left;
      width: 300px;
      margin-left: -300px;
    }

    .center {
      margin: 0px 400px;
    }
  </style>
</head>
<body>
  <div class="container">
  <div class="content">
     <div class="center">中间</div>
  </div>
  <div class="left">左边</div>
  <div class="right">右边</div>


</div>


</body>
</html>


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。