CSS 三列布局 - 双飞翼布局

最新推荐文章于 2024-07-25 10:59:09 发布
最新推荐文章于 2024-07-25 10:59:09 发布
阅读量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经典布局 -- 圣杯布局 & 双飞翼布局
Sun_blog
06-10 465
文章目录引言圣杯布局圣杯布局DOM结构圣杯布局样式圣杯布局总结双飞翼布局双飞翼布局DOM结构双飞翼布局样式双飞翼布局总结总结 引言 圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。 圣杯布局 圣杯布局DOM结构 <header>this is the header</header> <main> <div class="center"&gt
几种常见的CSS布局-- 双飞翼布局
LuckXinXin的博客
02-05 489
双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。 .container { /*padding-left:150px;*/ /*padding-right:190px;*/ } .main-wrap { width: 100%; float: left; } .main { margin-left: 150px; margin-rig.
css布局---双飞翼布局和圣杯布局
Garlen20o的博客
06-18 406
css实现三栏布局---双飞翼布局和圣杯布局
CSS双飞翼布局
weixin_57334661的博客
06-01 425
比如：写一个左中右布局占满全屏，其中左、右两块固定宽 200px，中间自适应，要求先加载中间块。双飞翼布局是一种经典的CSS布局模式，主要用于实现左右两列固定宽度，中间列自适应的布局。左右 200px 中间自适应。
css-布局-双飞翼模型布局
hety119的专栏
02-28 293
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css-布局-双飞翼模型布局&lt;/title&gt; &lt;style&gt; * {
CSS经典布局-------三列布局、双飞翼、圣杯布局、伪等高布局、
WaNgLu:)的博客
11-25 296
三列布局（定位） 1.两边固定，中间自适应 2.当中列要完整显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; ...
css-float布局-经典双飞翼布局
weixin_41983443的博客
03-20 883
<style type="text/css"> body { min-width: 550px; } #main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap { margin-left: 190px; margin-right: 190px;
css布局-双飞翼布局
lly193426的博客
08-19 210
主要优化了圣杯布局中开启定位的问题 <style> #parent{ height: 300px; } #left,#center,#right{ height: 300px; /* 第一步：三个容器横向排列 float=>已经在一行,因为center是100%，所以left和right会掉下去 */ float: left;
CSS经典布局--圣杯布局和双飞翼布局
W2001r的博客
07-10 1803
CSS经典布局--圣杯布局和双飞翼布局
css---双飞翼和圣杯布局
追梦的女孩博客
05-27 533
双飞翼、圣杯布局 概念:都是侧边两栏宽度固定，中间栏宽度自适应。 用处:解决中间部分被挡住的问题。 圣杯布局: 双飞翼布局:双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。 圣杯布局:在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative。 双飞翼实现代码 <!DOCTYPE html> <html> <head&
CSS布局之圣杯布局与双飞翼布局
01-21
按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。 圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 1.将三者都设置 float...
css多种方式实现双飞翼布局
09-22
主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS双飞翼布局的两种方式实现示例
12-30
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... &...
CSS学习笔记
ngczx的博客
07-23 665
CSS学习笔记
css in js 相比较 css modules 有什么好处？
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 382
CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案，它们各有优势。动态样式：CSS-in-JS 可以轻松创建基于 props 或状态的动态样式，更灵活地处理复杂的样式逻辑。无需额外的构建配置：大多数 CSS-in-JS 解决方案可以直接使用，不需要额外的 webpack 配置。无需命名约定：CSS-in-JS 自动生成唯一的类名，避免了命名冲突，不需要遵循特定的命名规范。运行时优化：一些 CSS-in-JS 库支持运行时的样式优化，只加载当前渲染所需的样式。
kechengsheji2021.zip
07-30
kechengsheji2021.zip
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
最新发布
07-30
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
TwineCompile571GetItSetup.7z
07-30
JomiTech TwineCompile 是一款集成在 C++Builder IDE 中的插件，旨在通过多种技术显著减少 C++ 编译、构建和生成的时间。以下是 TwineCompile 的一些关键能力和特点： 集成编译优化：TwineCompile 通过多线程、文件缓存和自动后台编译等技术，直接集成到 C++Builder IDE 中，优化编译过程。 编译器封装：它不是 C++ 编译器，而是将 Embarcadero 经典和 CLANG 编译器封装在一个构建系统中，优化文件和项目的构建方式。 IDE 支持：TwineCompile 通过 GetIt 包管理器提供，支持安装它的 IDE。对于旧版 IDE 或没有活跃更新订阅的 IDE，可以购买许可证以获得支持。 版本兼容性：TwineCompile 5.x 支持 C++Builder 10.2 至 C++Builder 12.0，而 TwineCompile 4.x 支持 C++Builder 5 至 C++Builder 10.1。
CSS 圣杯布局 / 双飞翼布局的实现
05-19
CSS圣杯布局和双飞翼布局都是三栏布局，其中主要内容区域在最中间，左右两侧是侧边栏。它们的目的是为了解决传统三栏布局固定中间宽度，侧边栏无法等高的问题。 CSS圣杯布局的实现： HTML结构如下： ``` 主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值