CSS 三列布局 - 双飞翼布局

最新推荐文章于 2024-06-01 23:21:16 发布
最新推荐文章于 2024-06-01 23:21:16 发布
阅读量158 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HAINIHAOya/article/details/123763003
版权

CSS 三列布局 - 双飞翼布局

双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。
首先给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、“margin-left: -100%“和"width: 100px”。再给类名为"center"的盒子添加"float: left"和"width: 100%“属性，该盒子并没有像圣杯布局时添加"padding"属性那样。继续给类名为"right"的盒子添加"float: left”、“width: 100px"和"margin-left: -100px”。最后给类名为"main"的盒子添加"margin: 0px 100px”，该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
                overflow:hidden;
                
            }
            .left {
                background-color: greenyellow;
                float:left;
                margin-left:-100%;
                width:100px;
            }
            .center{
                float:left;
                width:100%;
            }
            .main {
                background-color: darkorange;
                margin:0 100px;
            }
            .right {
                background-color: darkgreen;
                float:left;
                width:100px;
                margin-left:-100px;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><main class="main"><br /><br /><br /></main></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>
冫水 阔 落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
双飞翼布局（css）
Y0admin的博客
10-27 2005
1. DOM结构 <div class="head"></div> <div class="container column"> <div class="center"></div> </div> <div class="left column"></div> <div class="right column"></div>
CSS 三列布局（三栏布局）
xiaoyaopikaqiu的博客
11-29 792
传统三列布局：左右定宽，中间自适应 绝对定位+外边距实现：左右盒子绝对定位，固定于页面左右两侧；中间盒子的 margin-left,margin-right 分别等于左右两个盒子的宽度。 <!--CSS--> * { margin: 0; padding: 0; font-size: 50px; text-align: center; } ...
CSS实现圣杯布局（双飞翼布局）的四种方式
一个普通人的博客
08-29 1227
总结了原生JS实现圣杯（双飞翼）布局的四种方式
CSS双飞翼布局
最新发布
weixin_57334661的博客
06-01 419
比如：写一个左中右布局占满全屏，其中左、右两块固定宽 200px，中间自适应，要求先加载中间块。双飞翼布局是一种经典的CSS布局模式，主要用于实现左右两列固定宽度，中间列自适应的布局。左右 200px 中间自适应。
HTML5中margin属性应用
大数据-攻城狮
12-09 6553
Document div{ width: 100px; height: 100px; background-color: red; /* 外边距 */ margin-top: 30px; margin-left: 100px; margin-right: 100px;
css---双飞翼和圣杯布局
追梦的女孩博客
05-27 532
双飞翼、圣杯布局 概念:都是侧边两栏宽度固定，中间栏宽度自适应。 用处:解决中间部分被挡住的问题。 圣杯布局: 双飞翼布局:双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。 圣杯布局:在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative。 双飞翼实现代码 <!DOCTYPE html> <html> <head&
【CSS如何实现双飞翼布局】
前端-CV全粘工程师
10-02 474
它的主要特点是左右两列是浮动的，中间一列使用margin负值来达到“自适应”的效果。中间的.content设置一个margin-left和margin-right，确保其在左右两侧预留200px的空间，以容纳左右两列的内容。通过上面的代码，我们得到的效果是一个完整的双飞翼布局。左右两列的宽度固定，中间的列根据页面的宽度自适应，并且不需要使用嵌套的div来实现。.left、.right设置为float:left，使其能够在文档流中脱离，并设置为固定宽度，分别为200px。
CSS常用布局方式-两列布局、三列布局
LKFOOD的博客
11-02 932
一.关于HTML基础 二.CSS基础 2.几种布局方式 1）table布局 当年主流的布局方式，第一种是通过table tr td布局 示例： <style type="text/css"> table{ width: 800px; height: 300px; border-collapse: collapse; } .left{ backgr...
CSS布局之圣杯布局与双飞翼布局
01-21
按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。 圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 1.将三者都设置 float...
css多种方式实现双飞翼布局
09-22
主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS双飞翼布局的两种方式实现示例
12-30
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... &...
css双飞翼布局方式
oops
05-21 313
css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小 这里有四种方式可以实现 一、利用浏览器加载顺序 将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;
CSS之实现双飞翼布局和圣杯布局的三种方式
qq_45907365的博客
04-27 156
以上就是今天要讲的内容。
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
weixin_30394975的博客
06-11 1032
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样一样的。圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%圣杯布局*{margin: 0;padding: 0;box-sizing: border-box;}.clearfi...
css双飞翼布局、圣杯布局与左侧宽度固定右侧自适应布局
weixin_50488897的博客
04-07 705
与双飞翼布局类似,但是顶端header和底端footer各自占据屏幕所有宽度,高度固定。/* 绝对定位会让元素脱离文档流进入浮动层,右侧元素能无视掉它 */代码实现跟双飞燕布局类似,只是加了个header和footer而已。/* 将margin-left设置为left盒子的宽度 *//* ::after伪元素清除浮动,解决父级塌陷问题 */左右宽度固定,中间宽度自适应,且要先渲染中间。
7. 等高、双飞翼和圣杯布局
草木红的博客
07-01 156
(一) 等高布局 多列的情况下，以最高的列为基准，形成等高的布局方式。 利用martin-bottom负值与padding-bottom配合实现。 * { margin: 0; padding: 0; } #parent { border: 1px black solid; overflow: hidden; background-color: slategray; } #box1 { float: left; background-color:
CSS经典布局-------三列布局、双飞翼、圣杯布局、伪等高布局、
WaNgLu:)的博客
11-25 296
三列布局（定位） 1.两边固定，中间自适应 2.当中列要完整显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; ...
css中的flex布局细节总结，如何用5行核心代码实现双飞翼
chloexxx的博客
03-31 452
双飞翼模型一般是左右两侧宽度固定，中间内容部分宽度自适应。双飞翼模型一般把内容部分，即mid，放在第一个定义，可以使得在dom树构建时先加载内容部分，用户体验更好。可以说是强迫症福音，flex可以轻松实现等间距的整齐排列，且父级盒子自行撑开不会塌陷。就是所谓的弹性布局，比较灵活。就是与之垂直的方向。两个轴主要是用来确定元素排列的方向。主要按照该属性定义在父级元素样式中or子级元素样式中。是默认值，表示主轴为水平方向。此时子元素水平排列。此时子元素垂直排列。给定一个body结构，对此进行flex布局。
CSS 圣杯布局 / 双飞翼布局的实现
05-19
CSS圣杯布局和双飞翼布局都是三栏布局，其中主要内容区域在最中间，左右两侧是侧边栏。它们的目的是为了解决传统三栏布局固定中间宽度，侧边栏无法等高的问题。 CSS圣杯布局的实现： HTML结构如下： ``` 主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值