布局
css布局
hello_dashen
这个作者很懒,什么都没留下…
展开
-
圣杯布局 与 双飞翼布局 的区别
相同点实现效果:两边顶宽,中间自适应的三栏布局,中间栏在放在文档流前面以优先渲染。实现技术:三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同点 - 解决 “中间栏div内容不被遮挡” 问题圣杯布局<div class="center">...</div>将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配原创 2021-08-05 22:12:30 · 119 阅读 · 0 评论 -
双飞翼布局
双飞翼布局<div class="middle"> <div class="center"> <div class="center-inner"> center 1、上部和下部各自占领屏幕所有宽度 2、上下部之间的部分是一个三栏布局 3、三栏布局两侧宽度不变,中间部分自动填充整个区域,中间盒子优先渲染 4、中间部分的高度是三栏中最高的区域的高度 </div> </div原创 2021-08-05 19:15:13 · 92 阅读 · 0 评论 -
圣杯布局 - float flex grid
圣杯布局特点1、上部和下部各自占领屏幕所有宽度2、上下部之间的部分是一个三栏布局3、三栏布局两侧宽度不变,中间部分自动填充整个区域,中间盒子优先渲染4、中间部分的高度是三栏中最高的区域的高度下面列出三种实现方法:float flex grid3行的高度设为: 40px 300px 40px三栏布局的左右侧宽度:200px 150px1. float实现(为了优先渲染center放在left前面)<div class="container"> <div cl原创 2021-08-05 17:44:21 · 216 阅读 · 0 评论 -
两栏布局 - 左自填充 右固定
左侧自动填充整个区域,右侧固定的两栏布局1.左侧div写在右侧div的前面<div class="wrap"> <div class="left">这是左 自填充</div> <div class="right">这是右 固定宽度</div></div>用float实现的css:.left { float: left; width: calc(100% - 200px); background-color原创 2021-08-04 19:51:23 · 171 阅读 · 0 评论 -
两栏布局:左固定 右自填充
两栏布局:左固定 右自适应剩下的宽度<div class="wrap"> <div class="left">这是左</div> <div class="right">这是右</div></div>右侧的 width 也可以设置百分比,不过没有 calc 灵活1.利用 inline-block,需要配合 font-size,要不会导致字不显示父 :font-size: 0左右:display: inline-blo原创 2021-08-04 16:18:55 · 158 阅读 · 0 评论