两栏布局的几种实现方式

通过以下四常见的方法均可以实现图中两栏布局的效果

侧边栏左浮动+正文部分overflow：auto
定位实现两栏布局
纯浮动形式
浮动+常规流

效果图

侧边栏左浮动+正文部分overflow：auto

代码部分

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap{width:900px;margin:0 auto;}.left{width: 200px;height: 500px;background: #ccffff;float: left;}.right{height: 500px;overflow: auto;background: #ffcccc;}</style>
</head>
<body><div class="wrap"><aside class="left"></aside><div class="right">这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！</div></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>Document</title><style>.wrap{width:900px;margin:0 auto;position: relative;}.left{width:200px;height:500px;background: #ccffff;position: absolute;top:0;left:0;}.right{width:700px;height:500px;background: #ffcccc;position: absolute;top:0;right:0;}</style>
</head>
<body><div class="wrap"><aside class="left"></aside><div class="right">这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！</div></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>Document</title><style>.wrap{width:900px;margin:0 auto;overflow: hidden;}.left{width:200px;height:500px;background: #ccffff;float: left;}.right{width:700px;height:500px;background: #ffcccc;float: left;}</style>
</head>
<body><div class="wrap"><aside class="left"></aside><div class="right">这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！</div></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>Document</title><style>.wrap{margin:0 auto;width:80%;}.left{width:200px;height:500px;background: #ccffff;float: left;}.right{height: 500px;background: #ffcccc;margin-left:200px;</style>
</head>
<body><div class="wrap"><aside class="left"></aside><div class="right">这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！</div></div>
</body>
</html>

两栏布局的几种实现方式相关推荐

三栏布局的几种实现方式
三栏布局是一种经典的页面布局:在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可随网页整体宽度的变化而变化( ...
两栏布局的四种实现方法
1.两栏布局 1.一栏定宽,一栏自适应效果如下图: html结构为: <div class="div1">div1</div> <div class ...
三栏布局的七种实现方式
目录 1.float 2.position 3.⭐ flex 布局 4.table 布局(很少用) 5.grid 布局(存在兼容性问题) 6.⭐ 圣杯布局 7.⭐ 双飞翼布局三栏布局一般指的是页面一 ...
css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...
本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果图: 圣杯布局圣杯 .container{ padd ...
两栏布局的5中实现方式
一栏固定宽度,一栏自适应方法1 左侧float:left,右侧margin-left. .left{float: left;width: 200px;} .right{margin-left: 20 ...
html+css两栏布局的三种方法
一. 1. 左边div设置float:left 或者position: absolute 脱离文档流 2. 避免左边div遮住右边div,右边div设置margin-left:左边div的宽度 < ...
html 左边固定右边自动,七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...

两栏布局的几种实现方式

两栏布局的几种实现方式

效果图

侧边栏左浮动+正文部分overflow：auto

定位实现两栏布局

纯浮动形式

浮动+常规流

两栏布局的几种实现方式相关推荐

最新文章

热门文章