两栏布局和三栏布局

最新推荐文章于 2022-08-18 05:00:52 发布
最新推荐文章于 2022-08-18 05:00:52 发布
阅读量170 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41772137/article/details/100605493
版权

两栏布局

水平方向：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .left{
      width: 300px;
      height:100px;
      background: red;
      float: left;
    }
    .right{
      width: 980px;
      height: 100px;
      background: blue;
      margin-left: 300px;
    }
  </style>
</head>

<body class="body">
  <div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
</body>

</html>

思路：让左栏元素左浮动，右栏元素设置等于左栏元素宽度的margin-left值。这是为了不影响右栏文本的布局

三栏布局

水平方向

1.浮动方法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .left{
      width: 300px;
      height:100px;
      background: red;
      float: left;
    }
    .right{
      width: 200px;
      height: 100px;
      background: blue;
      float: right;
    }
    .middle{
      margin-left: 300px;
      margin-right: 200px;
    }
  </style>
</head>

<body class="body">
  <div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>
  </div>
</body>

</html>

思路：左右两栏用浮动固定，中间栏的margin-left为左栏的宽度，margin-right为右栏宽度。注意html元素的顺序为左右中

2.绝对定位

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body,html,.container{
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .left,.right{
      top: 0;
      height: 100%;
      background: red;
      position: absolute;
    }
    .left{
      left: 0;
      width: 100px;
    }
    .right{
      right: 0;
      width: 100px;
    }
    .middle{
      height: 100%;
      background: blue;
      margin: 0 100px 0 100px;
    }
  </style>
</head>

<body class="body">
  <div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>
  </div>
</body>

</html>

思路：左右栏元素用绝对定位固定，中间元素设置margin值空出左右栏元素占用的位置

3.flex布局方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container{
      display: flex;
    }
    .left{
      width: 100px;
      height: 100px;
      background: red;
    }
    .right{
      width: 100px;
      height: 100px;
      background: red;
    }
    .center{
      flex-grow: 1;
      height: 100px;
      background: blue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </div>
</body>

</html>

思路：父元素display:flex,方向默认row,左右宽度固定，中间设置flex-grow:1分配到剩下的所有空间

4.圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      min-width: 700px;/*left+right+left*/
    }
    #header,#footer{
      width: 100%;
      background: #ccc;
    }
    #container{
      width: 100%;
      height: 200px;
      background: peru;
      padding-left: 200px;
      padding-right: 300px;
      box-sizing: border-box;
    }
    .column{
      float: left;
      height: 200px;
    }
    #center{
      width: 100%;
      background: red;
    }
    #left{
      width: 200px;
      background: green;
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    #right{
      width: 300px;
      background: blue;
      margin-right: -300px;
    }
    #footer{
      clear: both;
    }
  </style>
</head>

<body>
  <header id="header">header</header>
  <div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
  <footer id="footer">footer</footer>
</body>

</html>

5.双飞翼布局

不用position:relative,暂时还不理解

垂直方向

1.position:absolute方法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .container div{
      position: absolute;
    }
    .top{
      top:0;
      width: 100%;
      height: 100px;
      background: red;
    }
    .center{
      width: 100%;
      top: 100px;
      bottom: 100px;
      background: green;
    }
    .bottom{
      bottom:0;
      width: 100%;
      height: 100px;
      background: blue;
    }
  </style>
</head>

<body class="body">
  <div class="container">
    <div class="top">上</div>
    <div class="center">中</div>
    <div class="bottom">下</div>
  </div>
</body>

</html>

思路：上下栏用绝对定位固定，中间栏也用绝对定位空出上下栏占用的位置

2.flex布局方法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body,html,.container{
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .container{
      display: flex;
      flex-direction: column;
    }
   .top{
     width: 100%;
     height: 100px;
     background: red;
   }
   .bottom{
     width: 100%;
     height: 100px;
     background: red;
   }
   .middle{
     width:100%;
     background: blue;
     flex-grow: 1;
   }
  </style>
</head>

<body class="body">
  <div class="container">
    <div class="top">上</div>
    <div class="middle">中</div>
    <div class="bottom">下</div>
  </div>
</body>

</html>

思路：设置父元素为弹性盒布局，方向为column,上下栏高度为固定值，中间栏占用所有剩下的空间。

注意：flex-grow属性设置元素能够分到多少父元素剩余的空间，中间栏设置为1，上下栏不设置默认为0，所以中间栏分到父元素剩下的所有空间

小结

三栏布局的总体思路就是两端固定，中间空出两端占用的空间

木缘1668
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文汇总 CSS 两列布局和三列布局的具体使用
01-19
但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。 两列布局 左列定宽，右列自适应 float + margin 布局 html 代码 <body> 左列定宽 右列自适应 </body> css 代码： #...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
weixin_42500279的博客
06-03 1871
三栏布局三列自适应布局通常指两边定宽，中间部分宽度自适应。这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。基于传统的position进行布局这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。1).绝对定位法绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用m...
HTML之基本布局设计之三栏式、两栏式设计
WillWinwin
11-21 9431
本文主要介绍的是如何构建布局，主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素，接下来就直接上代码吧~ 三栏式 HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>This is my
如何实现两、三栏布局&解决方案
一片涟漪
08-28 530
两栏布局： 两栏布局的三种方法 1、需要两个div，主要原理是将第一个div设为浮动，并加上宽度，然后就可以实现两栏布局，并不需要设置第二个div的任何东西。代码如下： div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; } #main{ background-color:aqua; /*margin-left:300px;*/
CSS布局——两栏布局和三栏布局
Hoshizola的博客
05-28 1399
在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。 一、两栏布局 以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。 方案一：float+margin 1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏； 2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移； 3、为防止右元素被左元素挡住，需要给右元素加外边距。 这是最简单的一种布局方案。 html结构： <div class="box"> <div c
布局
01-08
概述：网页布局对于改善网站外观非常...两栏布局和三栏布局最是常见 例如： .clearfix::after{ content: ; display: block; clear: both; } .container{ background: lightblue; width: 90%; margin: 0 aut
用CSS的float和clear属性进行三栏网页布局
01-19
三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一...
学习DIV+CSS网页布局之混合布局
12-13
　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的...
CSS三列布局的多种表现形式
09-27
本文为大家详细介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应五种情况，感兴趣的小伙伴们可以参考一下
两栏布局,三栏布局
weixin_46015250的博客
08-18 1244
两栏布局（5种）和三栏布局（四种）
【CSS】CSS布局：两栏布局、三栏布局、水平垂直居中
ColdCoder的博客
03-04 810
1. 页面布局 三栏布局 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应。 五种方式： float布局：优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的；缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 absolute布局：优点：很快捷，设置很方便，而且也不容易出问题；缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。 flex布局：优点
css布局：table布局、两栏布局、三栏布局
一颗程序猿
10-06 4238
css布局：table布局、两栏布局、三栏布局
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1027
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，float：left ，宽度固定设为200px; 右盒子：margin-left:200px;宽度默认（块级元素不设置宽度或auto时为100%） 2、float+BFC 左盒子，float：left ，宽度固定设为200px; 右盒子，设置overflow:hidden,触发了BFC，其中BFC特性为不与浮动元素重叠 3、float+flex 父盒子：display：flex; 左盒子，float：left ，宽度固定设为
两栏布局、三栏布局常用方法详解
abuanden的博客
03-03 718
这里写目录标题两栏布局一栏固定宽度，一栏自适应一、左float，右margin-left二、左侧float:left; 右侧overflow:hidden；（推荐）三、利用绝对定位四、利用弹性布局（推荐）一栏不定宽，一栏自适应一、左侧float:left; 右侧overflow:hidden；（BFC）二、利用弹性布局（推荐）三栏布局一. 浮动布局二、绝对定位布局三、flex布局(推荐）四、网格布局（推荐）五、圣杯布局（float+负margin）六、双飞翼布局(推荐） 两栏布局 一栏固定宽度，一栏自适应
两栏布局、三栏布局（圣杯布局、双飞翼布局）
girllan的博客
02-22 440
经典布局—两栏布局(一栏固定，另外一栏自适应)、三栏布局（圣杯布局、双飞翼布局）
CSS：两栏布局，三栏布局
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-15 9637
两栏布局方法一：浮动布局<div id = "aside"> </div> <div id = "main"> </div> div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; } #main{ background-color:aqua; margin-left:300
css实现两栏布局、三栏布局
远方
03-20 595
1.两栏布局 //html <div class="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。 </div> </div> (1) grid ...
bfc两栏三栏布局实现思路
最新发布
05-15
利用BFC可以很方便地实现两栏和三栏布局。 两栏布局实现思路： 1. 父元素设置为BFC，可以通过设置overflow: hidden或display: flow-root实现。 2. 左侧元素设置为float: left或display: inline-block，占据父元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值