三栏布局

最新推荐文章于 2022-07-06 14:53:01 发布
最新推荐文章于 2022-07-06 14:53:01 发布
阅读量245 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/narzisen/article/details/108928214
版权

圣杯布局：

左、右栏固定。中间自适应，而且中间需要优先加载。

确定的架构：

<body>

    <header>头部</header>

   <div class="center">主区域</div> 

   <div class="left">左区域</div> 

   <div class="right">右区域</div> 

   <footer>底部</footer>

</body>

1.首先我们需要优先加载主区域，所以把主区域放最前面，我们需要把主区域、左区域、右区域设置到同一行所以

.center,.left,.right{

  float:left;

}

2.但是这样后会产生塌陷

给中间区域加上一个标签，包裹他们

<body>

    <header>头部</header>

    <div class="clearfix">

         <div class="center">主区域</div> 

        <div class="left">左区域</div> 

        <div class="right">右区域</div> 

    </div>

   <footer>底部</footer>

</body>

3.然后变成了这个样子

4.我们需要把左右的距离空出来

.wrapper{

            height:200px;

            background-color: darkgreen;

            padding:0 100px;

        }

5.我们需要让红色块（left）移到上面玫色块（center）

因为玫色（center）和红色(left)都加了浮动，所以使用margin-left:-100%,是相对于上一个浮动的盒子

.left{

           height:100px;

           width:100px;

           float:left;

           background-color: darkred;

           margin-left: -100%;

        }

6.让红色（left）移到左边

.left{

           height:100px;

           width:100px;

           float:left;

           background-color: darkred;

           margin-left: -100%;

           position:relative;

           left:-100px;

        }

7.让藕粉（right）移动到上面

.right{

            height: 100px;

            width:100px;

            float:left;

            background-color: darksalmon;

            margin-right: -100%;

        }

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯</title>
    <style>
        .wrapper{
            height:200px;
            background-color: darkgreen;
            padding:0 100px;
        }
        .center{
            height:100px;
            width:100%;
            float:left;
            background-color: darkmagenta;
        }
        .left{
           height:100px;
           width:100px;
           float:left;
           background-color: darkred;
           margin-left: -100%;
           position: relative;
           left:-100px;
        }
        .right{
            height: 100px;
            width:100px;
            float:left;
            background-color: darksalmon;
            margin-right: -100%;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div class="wrapper">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer>尾部</footer>
</body>
</html>

双飞翼布局：

1.双飞翼可以看成，中间一个鸟，左右是鸟的翅膀

 一开始的架构：

<body>

<header>头部</header>

    <div class="wrapper">

        <div class="center">

           <div class="inner">center</div>

        </div>

           <div class="left">left</div>

           <div class="right">right</div>

    </div>

    <footer>尾部</footer>

</body>

2.需要为左右两边留出翅膀的位置

.inner{

            margin:0 100px;

        }

3.让center、left、right都在一行上，都加左浮动

4.让left往上走

 .left{

            height:100px;

            width:100px;

            background-color: darkslateblue;

            float: left;

            margin-left: -100%;

        }

5.right往右上走

.right{

            height:100px;

            width:100px;

            background-color: darkturquoise;

            float:left;

            margin-left: -100px;

        }

总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .wrapper{
            height:100px;
        }
        .center{
            height:100px;
            background-color: darkseagreen;
            width:100%;
            float:left;
        }
        .inner{
            margin:0 100px;
            background-color: forestgreen;
        }
        .left{
            height:100px;
            width:100px;
            background-color: darkslateblue;
            float: left;
            margin-left: -100%;
        }
        .right{
            height:100px;
            width:100px;
            background-color: darkturquoise;
            float:left;
            margin-left: -100px;
        }

    </style>
</head>
<body>
    <header>头部</header>
    <div class="wrapper">
        <div class="center">
           <div class="inner">center</div>
        </div>
           <div class="left">left</div>
           <div class="right">right</div>
    </div>
    <footer>尾部</footer>
</body>
</html>

float布局

思路：一个左浮，一个右浮，中间盒子再腾出两边位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .left{
           width:100px;
           background-color: forestgreen;
           float:left;
        }
        .right{
            width:100px;
            background-color: gold;
            float:right;
        }
        .center{
           
            background-color: dodgerblue;
            margin:0 100px;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>
</html>

绝对定位

左右盒子都绝对定位，中间盒子腾出左右盒子的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .left{
           width:100px;
           background-color: forestgreen;
           position:absolute;
           top:0;
           left:0;
        }
        .right{
            width:100px;
            background-color: gold;
            position:absolute;
            right:0;
            top:0;
        }
        .center{
           
            background-color: dodgerblue;
            margin:0 100px;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       .wrap{
           display: flex;
       }
       .center{
           height:100px;
           background-color: dodgerblue;
           flex:1;
       }
       .left{
           height:100px;
           width: 100px;
           background-color: floralwhite;
       }
       .right{
           height:100px;
           width:100px;
           background-color: gold;
       }
    </style>
</head>
<body>
    <div class="wrap">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
</body>
</html>

 

HTML中的div怎么左中右布局,CSS 之 div 左中右布局
weixin_33676046的博客
06-22 925
无标题文档#header{width:780px;height:80px;background:#069;margin:0 auto;}#box {width:780px; margin:0 auto; border:10px solid #000;border-radius:38px;}#left {width:180px;height:300px;background:#f90;float:l...
头部侧边栏内容区布局
iteye_15462的博客
06-16 726
这是一个常用的布局，尤其是在管理系统中，要求头部高度固定，左侧宽度固定，内容区高度和宽度随浏览器窗口大小变化而变化并充满浏览器窗口右下角   之前都是用js实现的，在窗口大小变化时，去设置相关区域的宽度和高度   后来发现可以直接用css实现，主要用的是绝对定位，top, right, bottom, left同时使用，关键是不能给内容区域设置宽度和高度，要不然绝对定位中的right...
div 布局_网页布局基础教程
weixin_39965881的博客
11-28 946
网页布局基础教程网页的布局有很多种方式，一般分为以下几个部分：头部区域部分菜单导航区域部分内容区域部分底部区域部分一般网页的布局网页头部区域部分头部区域部分位于整个网页的顶部，一般用于设置网页的标题或者网页的图标：实例如下：代码1效果1代码2效果2部分代码：<html><head> <meta charset="utf-8"> <ti...
实现常用的两栏布局(左侧固定+右侧自适应)以及三栏布局(圣杯布局和双飞翼布局)
Younguys
07-06 2155
两栏布局和三栏布局是我们常用到的布局形式，下面我们分别进行实现和总结。现在有以下 DOM 结构： （1）利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 设为固定宽度 。注意，因为右边元素的 默认为 ，所以会自动撑满父元素。 （2）同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 这样右边就触发了 ， 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。 (3) 利用 布局，左边元素固定宽度，右边的元素设置 。 (4）利用绝对定位，父级元素设为相对定位。左边元素 定位，
CSS之两栏固定布局（一）
tian361zyc的博客
06-30 822
css
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
CSS经典三栏布局方案（6种方法）
01-19
本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下： 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见 1. float布局 最简单的三栏布局就是利用float进行布局。首先来...
CSS Float布局过程与老生常谈的三栏布局
12-08
标题“CSS Float布局过程与老生常谈的三栏布局”强调了浮动在创建经典三栏布局中的应用。在传统的三栏布局中，通常有一个主内容区域居中，两侧分别有侧边栏。使用浮动布局可以实现这种效果，同时保持内容的可读性和...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
div css下拉导航菜单
10-23
导航菜单.div css下拉导航菜单分类代码是一款绿色风格的jQuery下拉分类导航菜单。
css-双飞翼布局+圣杯布局+侧边栏固定布局
weixin_47345929的博客
12-01 346
网站开发策略：先整体再局部，至顶向下，逐步细化。 双飞翼布局 由三列组成，两端固定，中间自适应。 两边叠加在了中间的上面 双飞翼布局的优点： （1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。 （2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。 <div class="container"> <div class="conculor content"></div> <div class="concul
CSS常用布局一（三栏布局）
BreenCL的博客
07-20 627
CSS常用布局一（三列布局） 一、常用的布局 前言：浏览网站时会发现圣杯布局和双飞翼布局已经是现今大多数网页布局的主流，因此也成为了前端工程师需要掌握的重要布局方式。而两种布局的效果基本一样，实现了一个两侧宽度固定，中间宽度自适应的三列布局样式。 圣杯布局的来历是2006年发在a list part上的文章In Search of the Holy Grail； 双飞翼则源自淘宝UED，两者都算是对页面的一种形象的表达，两中布局的异同如下： 相同点： 两侧宽度固定，中间宽度自适应的三栏布局； 中间栏要放在
h5中的结构元素header、nav、article、aside、section、footer介绍
09-13 2078
结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <header> <h1>网页主题</h1> &lt...
HTML中的header标签怎么用？HTML中header标签的作用_header标签正确用法
热门推荐
panda_2022的博客
06-06 4万+
  为了更好地处理今天的互联网应用，HTML5添加了很多新标签及功能，其中header标签是今天讨论的内容。我们将讨论HTML中的header标签怎么用？HTML中header标签的作用，header标签正确写法。   header标签是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。header标签通常至少包含（但不限于）一个标题标记（<h1>–<h6>），还可以包含文档流中的其他内容，如logo或搜索表单,还可以在header标签中包含nav标签。需要注意的是，he
CSS DIV 样式布局 III 头header 脚 footer 身 center
01-06 8210
这个是我很久以前写过的一个留言板的布局  模板，（提供给新手门参考，请尊重原创劳动成果)    页面分享代码如下： CSS DIV 样式布局 III 头header 脚 footer 身 center body { font-family: "黑体"; font-size: 12px; color: #000; margin: 0px
CSS常用基础样式
weixin_44517209的博客
06-26 1235
一 css基本知识 1.1 CSS介绍 CSS 指的是层叠样式表* (Cascading Style Sheets)，它描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。它可以外部样式表存储在 CSS 文件中，同时控制多张网页的布局，节省了大量工作。 CSS 规则集（rule-set）由选择器和声明块组成，选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。 通常我们在单独的css文件中写css，不推荐在html文档中书写css代码。在html中使用css可以使用lin
css float 居中如何设置
liuxy_236的博客
06-01 1万+
float是没有设置居中center的值。一般使用float:left或float:right来实现并排形成居中效果。 通常有靠左、有靠右、有靠中的三列布局，其中最靠左布局设置float:left，最靠右布局设置float:right，当然中间对象盒子通常要么设置float:left要么设置float:right来实现使用float居中布局。 ...
html图片靠右浮动 文字左侧环绕,CSS 模拟float实现center文字左右环绕图片的效果...
weixin_32514497的博客
05-30 1807
什么是文字左右环绕图片？就是下图的效果：效果的CSS代码可以点击这里 查看在CSS中，并没有float: center这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。经常会有小伙伴问：有float: left和right，为什么没有float: center？我的答案是：1.text-align: center已经可以实现内联元素的居中效果2.在一行中使文字环绕显示在图片的两侧，这种效果浏...
深入解析CSS Float布局：三栏布局详解
本文将深入探讨CSS Float布局过程及其在三栏布局中的应用。CSS Float是前端开发中常见的布局方式，尤其是在实现网站结构如两栏和三栏布局时。尽管关于此主题的网络资源众多，作者认为许多文章未能触及核心，因此决定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值