前端CSS（1）之两列布局和三列布局

最新推荐文章于 2024-07-15 14:57:05 发布
最新推荐文章于 2024-07-15 14:57:05 发布
阅读量1.2k 收藏 4
点赞数
文章标签： 前端 ViewUI
原文链接：https://juejin.im/post/5c88838fe51d4572a74287ee
版权

  网页布局就是将网页根据不同的内容进行划分，这样做不仅可以美化网页外观，还可以让用户对你的网页功能一目了然，提升用户体验。
  两列布局和三列布局是我们最常见的两种布局，我今天总结一下实现这两种布局的多种方式。本文代码没有考虑兼容性。

两列布局

  侧栏宽度固定，左边内容部分宽度自适应。header和footer高度固定。

利用浮动来布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #aside {
            height: calc(100% - 100px);
            width: 200px;
            text-align: center;
            background-color: aquamarine;
            float: left;
        }
        
        #main {
            height: calc(100% - 100px);
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
            overflow: hidden; //使其成为BFC，清除浮动，因为浮动也是一个BFC，两个BFC不会重叠
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
利用绝对定位来布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            position: relative;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #footer {
            position: absolute;
            bottom: 0;
            width: 100%
        }
        
        #aside {
            /* height: calc(100% - 100px); */
            width: 200px;
            text-align: center;
            background-color: aquamarine;
            position: absolute;
            left: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #main {
            /* height: calc(100% - 100px); */
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
            position: absolute;
            right: 0;
            bottom: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            display: flex;
            flex-wrap: wrap;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
            flex-basis: 100%;
        }
        
        #aside {
            width: 200px;
            height: calc(100% - 100px);
            text-align: center;
            background-color: aquamarine;
        }
        
        #main {
            height: calc(100% - 100px);
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
利用网格grid来布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            display: grid;
            grid-template-columns: 200px auto;
            grid-template-rows: 50px auto 50px;
            grid-template-areas: "header header" "aside main" "footer footer"
        }
        
        #header,
        #footer {
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #header {
            grid-area: header;
        }
        
        #footer {
            grid-area: footer
        }
        
        #aside {
            grid-area: aside;
        }
        
        #main {
            grid-area: main;
        }
        
        #aside {
            text-align: center;
            background-color: aquamarine;
        }
        
        #main {
            background-color: #eee;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

三列布局

  两边侧栏宽度固定，中间内容部分宽度自适应。header和footer高度固定。

利用浮动float来布局

float元素是有浮动范围的，在它的包含块中，如果它之前有内容，会阻止它向上浮动，因此在不要求content元素首先渲染的情况下我们才会用浮动布局，因为此时content元素必须位于浮动元素下方。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #aside1,
        #aside2 {
            height: calc(100% - 100px);
            width: 200px;
            text-align: center;
            background-color: aquamarine;
        }
        
        #aside1 {
            float: left;
        }
        
        #aside2 {
            float: right;
        }
        
        #main {
            height: calc(100% - 100px);
            background-color: #eee;
            text-align: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
利用absolute定位来实现布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            position: relative;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #footer {
            position: absolute;
            bottom: 0;
            width: 100%
        }
        
        #aside1,
        #aside2 {
            /* height: calc(100% - 100px); */
            width: 200px;
            text-align: center;
            background-color: aquamarine;
        }
        
        #aside1 {
            position: absolute;
            left: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #aside2 {
            position: absolute;
            right: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #main {
            /* height: calc(100% - 100px); */
            width: calc(100% - 400px);
            background-color: #eee;
            text-align: center;
            position: absolute;
            right: 200px;
            bottom: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <main id="main">main</main>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
利用flex和grid布局

  它们的布局方式与两列布局时的方式大同小异，这里就不多加阐述。我们来总结一下实际网页三列布局中会用的两种布局：圣杯布局和双飞翼布局。

圣杯布局和双飞翼布局
圣杯布局

  为了中间content不被遮挡，为外层section设置了padding，使得边侧栏有地方放。且利用了margin为负对浮动元素的影响。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        section {
            padding: 0 200px;
            height: calc(100% - 100px);
            /* height: 100px; */
        }
        
        #main {
            float: left;
            background-color: #eee;
            text-align: center;
            height: 100%;
            width: 100%;
        }
        
        #aside1,
        #aside2 {
            float: left;
            width: 200px;
            height: 100%;
            background-color: aquamarine;
            position: relative;
            text-align: center;
        }
        
        #aside1 {
            left: -200px;
            margin-left: -100%;
        }
        
        #aside2 {
            right: -200px;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
            <aside id="aside1">aside1</aside>
            <aside id="aside2">aside2</aside>
        </section>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
双飞翼布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        section {
            float: left;
            height: calc(100% - 100px);
            width: 100%;
            /* height: 100px; */
        }
        
        #main {
            background-color: #eee;
            text-align: center;
            height: 100%;
            margin: 0 200px;
        }
        
        #aside1,
        #aside2 {
            float: left;
            width: 200px;
            height: calc(100% - 100px);
            background-color: aquamarine;
            text-align: center;
        }
        
        #aside1 {
            margin-left: -100%;
        }
        
        #aside2 {
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
        </section>
        <aside id="aside1">aside1</aside>
        <aside id="aside2">aside2</aside>
        <p style="clear:both"></p>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
weixin_33939843
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端之三列布局
qq_31207499的博客
08-08 6404
        在前端开发中，三列布局是很基础的一种场景，这篇文章就总结一下实现三列布局的方法及优缺点，还有一些和三列布局相关的布局方式。         三列布局的要求一般为：               1、左右两边宽度固定，中间宽度自适应。               2、中间列的内容可以完整显示。       这种情况用定位和浮动都可以实现。         1、使用定位，使用定...
CSS实现页面两列布局与三列布局的方法示例
09-27
主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下
两列布局
weixin_30846599的博客
12-06 139
很多网站都使用了两列布局，就是左边固定，右边自适应的布局。两列布局有多种方法，现在来列举一下 第一种：margin + float / margin + absolute 将左边设置 float 或者 absolute ，使其脱离文档流，右边使用margin-left设置左右间隔，大小一般为 ＞= 左边的宽度，因为是块级元素，所以右边可以充满剩余的屏幕，这...
前端-笔试题3-grid布局
最新发布
weixin_53649241的博客
07-15 1398
还在仅仅使用float和flex布局嘛，笔试题gird布局等你尝试
css 列 布局,CSS二列&三列布局
weixin_29791447的博客
08-03 336
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法二列&三列布局：image.png二列布局的特征通常是侧栏固定宽度，主栏自适应宽度三列布局的特征通常是两边侧栏固定宽度，主栏自适应宽度实现方式有以下几种：a. 浮动布局原理：首先分别给两边侧栏左右浮动，然后中间主栏设置左右margin给两边侧栏留出空间，主栏自适应宽度DOM文档：CSS文档:.left{fl...
CSS多栏布局-两栏布局和三栏布局
weixin_44286392的博客
07-25 1229
css多栏布局
一文汇总 CSS 两列布局和三列布局的具体使用
01-19
两列布局 左列定宽，右列自适应 float + margin 布局 html 代码 <body> 左列定宽 右列自适应 </body> css 代码： #left { float: left; width: 200px; height: 400px; ba
CSS布局实例代码 两列布局实例
11-30
本实例探讨了常见的CSS布局模式，包括两列布局和三列布局，以及等高布局的实现方法。 首先，我们来看两列布局。两列布局通常用于创建一个有侧边栏和主要内容区域的网页结构。在描述中提到了两种不同的两列布局方式...
学习DIV+CSS网页布局之混合布局
09-24
在学习混合布局之前，通常需要先掌握一列、两列和三列布局的基本方法，因为混合布局往往是在这些基础布局之上进行扩展和组合。本文介绍的混合布局，是在DIV+CSS网页布局教程中的第四篇，内容涵盖了一般混合布局和...
前端大厂最新面试题-column_layout.docx
06-06
本文档主要讲解了前端开发中常见的两栏布局和三栏布局的实现方法，以及它们的优缺点。 两栏布局 两栏布局是指将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。这种布局适用于...
网站前端网页源码模板 (1364).zip
09-24
5. **网页布局**：理解不同布局（如两列和三列）的特点和使用场景，有助于设计适合用户交互的界面。 6. **源码修改与调试**：开发者需要熟悉HTML和CSS语法，以便根据需求修改源码，同时利用styles.html这样的文件...
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1130
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，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 ，宽度固定设为
零基础学前端 两列布局左边固定右边自适应
web前端学习部落22群
05-10 495
零基础学前端 两列布局左边固定右边自适应 .div1{ position: absolute; width: 200px; height: 200px; background: darkcyan; } .div2{ height: 200px; background: red; margin
前端学习（511）：两列布局的第一种方式
歌谣的博客
03-11 202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两列布局<...
前端学习（515）：两列布局第二种方案得优缺点
歌谣的博客
03-12 276
前端学习（514）：两列布局得第二种方案
歌谣的博客
03-12 189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
【前端面试】三列布局、两列布局、垂直居中、自适应布局
weixin_39531565的博客
03-15 343
CSS 三列布局 条件：左右200px宽 中自适应 方法 布局 样式 绝对定位 外 左 中 右 外：相对定位 左中右：高200px 左右：宽200px 绝对定位 左：左定位0 上定位0 右：右定位0 上定位0 中：左右外边距200px 浮动布局...
前端学习（516）：两列布局的第三种解决方案
歌谣的博客
03-12 230
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第三种实现方案&lt...
前端学习（512）：两列布局的第一种方式的优缺点
歌谣的博客
03-11 221
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两列布局<...
div+css五行两列布局
10-25
五行两列布局是一种常见的网页布局方式，可以使用div+css实现。具体实现方法如下： 1. HTML结构 ```html <!-- 左侧内容 --> <!-- 右侧内容 --> ``` 2. CSS样式 ```css .container { width: 100%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值