HTML两栏布局和三栏布局

最新推荐文章于 2024-09-23 19:49:13 发布

J桀

最新推荐文章于 2024-09-23 19:49:13 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html 前端 css html5

本文链接：https://blog.youkuaiyun.com/m0_59225791/article/details/128855576

本文详细介绍了HTML的两栏布局和三栏布局实现方法，包括浮动、定位、BFC等策略。对于两栏布局，提到了六种不同的实现方式，如浮动、定位和负边距等。而在三栏布局中，重点讲解了圣杯布局和双飞翼布局的实现步骤，强调了布局中的关键技巧和注意事项，如使用负边距、相对定位和box-sizing属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两栏布局

需求：两列布局，左侧宽度固定，右侧宽度适应窗口变化

1.方法一

左侧右侧都浮动

2.方法二

右侧定位

3.方法三

左侧定位，右侧设置左外边距

4.方法四

左侧定位，右侧有一层容器，设置容器左侧内边距（容器和内容都不用设置宽度）

5.方法五

左侧浮动，右侧触发BFC（可以设置溢出隐藏）

6.方法六

使用外边距为负数（向上拉100vh）把右侧拉到一行上

三栏布局

需求：三栏布局，中心板块的结构标签要在html结构中，左右板块的前面

圣杯布局

结构：

<div class="cont">
    <div class="mid">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

第一步：三个子元素都左浮动

第二步：第一个div宽度设置为父容器100%。（此时，后两个div排在下一行）

第三步：使用左外边距负数将后两个元素拉上去（此时，后两个子元素盖在第一个div上）

第四步：给容器设置左右内边距，分别是下面两个div的宽度（此时，三个元素都被内边距挤压，后两个元素仍是盖在第一个div上）

第五步：后两个元素使用相对定位，将自己分别拉到左边和后边，不再盖在第一个div上

注意：容器要设置属性box-sizing: border-box（怪异盒子）

双飞翼布局

结构：

<div class="cont">
    <div class="mid">
    	<div class="main"></div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

第一步：三个亲子元素都左浮动

第二步：第一个mid宽度设置为父容器100%（此时，后两个div排在下一行）

第三步：使用左外边距负数将后两个元素拉上去（此时，后两个子元素盖在第一个mid上）

第四步：设定好mid中main板块作为中心板块的宽度，给它设置左右外边距，将它调节到中间