布局
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 · 91 阅读 · 0 评论 -
双飞翼布局
双飞翼布局 <div class="middle"> <div class="center"> <div class="center-inner"> center 1、上部和下部各自占领屏幕所有宽度 2、上下部之间的部分是一个三栏布局 3、三栏布局两侧宽度不变,中间部分自动填充整个区域,中间盒子优先渲染 4、中间部分的高度是三栏中最高的区域的高度 </div> </div原创 2021-08-05 19:15:13 · 83 阅读 · 0 评论 -
圣杯布局 - float flex grid
圣杯布局 特点 1、上部和下部各自占领屏幕所有宽度 2、上下部之间的部分是一个三栏布局 3、三栏布局两侧宽度不变,中间部分自动填充整个区域,中间盒子优先渲染 4、中间部分的高度是三栏中最高的区域的高度 下面列出三种实现方法:float flex grid 3行的高度设为: 40px 300px 40px 三栏布局的左右侧宽度:200px 150px 1. float实现(为了优先渲染center放在left前面) <div class="container"> <div cl原创 2021-08-05 17:44:21 · 208 阅读 · 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 · 139 阅读 · 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 · 148 阅读 · 0 评论