实现两栏布局的几种方式

最新推荐文章于 2024-07-12 08:49:29 发布
最新推荐文章于 2024-07-12 08:49:29 发布
阅读量981 收藏 3
点赞数 1
分类专栏： CSS 文章标签： css两栏布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44162474/article/details/103496829
版权
本文介绍了实现两栏布局的四种常见方法：1) 利用浮动，通过设置左边元素浮动和右边元素的margin；2) 使用flex布局，通过设置右边元素的flex-grow属性；3) 通过绝对定位，设定父元素为相对定位，调整左右两边元素的位置；4) 同样使用绝对定位，但直接设置左边元素宽度和右边元素的left属性。每种方法都提供了核心代码示例。
摘要由CSDN通过智能技术生成

文章目录

说明

两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。

左边的宽度固定为200px

1、利用浮动

  • 将左边元素的宽度设置为200px，并设置其向左浮动
  • 将右边元素的 margin-left 设置为200px

核心代码

.left {
   
  float: left;
  width: 200px;
  height: 500px;
  background-color: lightseagreen;
}

.right {
   
  margin-left: 200px;
  height: 500px;
  background-color: lightsalmon;
}

2、利用 flex 布局

  • 设置右边元素的 放大比例（flex-grow）为1

核心代码

.wrapper {
   
  display: flex;
}

.left {
   
  width: 200px;
  height: 500px;
  background-color: lightseagreen;
}

.right {
   
  flex-grow: 1;
  height: 500px;
  background-color: lightgreen;
}

3、利用绝对定位

  • 将父元素设置为相对定位
  • 左边的元素设置为绝
最低0.47元/天 解锁文章
亦是木子也是雨
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三栏布局实现的几种方式
Dear
11-27 1117
文章目录说明1、利用浮动2、利用绝对定位3、利用 flex 布局圣杯布局方式一：利用浮动和定位实现方式二：利用 flex 实现双飞翼布局完整代码 说明 三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现 left 为300px，right 为200px 1、利用浮动 原理：浮动元素脱离文档流 html结构 <div class="wrapper"> <div class="left"></div> <div class
CSS实现两栏布局，左边固定，右边自适应的4种方法
11-21
1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
html定位样式理解：绝对定位和相对定位
weixin_41174502的博客
04-10 580
设置了绝对定位样式的元素会原地上浮，后浮起来的元素浮得最高，默认z-index（层级）为0。 如下示例：父级div里面有3个div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
使用CSS实现两栏布局：多种方法与最佳实践
最新发布
My_wife_QBL的博客
07-12 385
通过合理使用浮动、Flexbox和Grid布局，可以轻松实现两栏布局。每种方法都有其优势和适用场景，开发者可以根据具体需求选择合适的方法。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
两栏布局的实现方式
Clover ‘s Blog
05-15 871
当overflow的取值不是默认值的时候，就会创建BFC（块级格式化上下文，让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局），从而起到一些独特的作用。浮动布局：将侧边栏浮动到左侧或右侧，使主要内容区域占据剩余空间。绝对定位布局：将侧边栏使用绝对定位来固定在左侧或右侧，再将主要内容区域使用 margin 或 padding 来避免与侧边栏重叠。弹性盒模型布局：将容器设置为 flex 布局，通过设置侧边栏宽度和主要内容区域宽度的比例，来实现两栏布局。【方法四】：网格布局。【方法一】：浮动布局。
实现两栏布局的方法
lpl_L的博客
08-27 209
两栏布局 方法一：BFC构建 两栏布局是主内容区为主，左（右）侧有一栏： 代码： <style> #header, #footer{ height: 100px; background: red; } #content .main{ height: 200px; background: green; overflow:
css实现三栏布局的几种方法及优缺点
12-13
我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及各自的优缺点是什么？ 本文源代码请猛戳三栏布局源码，欢迎star和fork 一、浮动布局 <!DOCTYPE ...
三栏布局的几种实现方式
Kotlin0139的博客
07-29 3410
三栏布局是一种经典的页面布局：在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）...
CSS：两栏布局，三栏布局
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-15 9699
两栏布局方法一：浮动布局<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】实现两栏布局的方式
weixin_47750287的博客
05-04 4123
【CSS】实现两栏布局的方式 一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。两栏布局的具体实现有以下几种方式： ① 利用浮动 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。 将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。 .container { height: 100px; } .left { float: left; width: 200px; height: 100px; background:
两栏布局的几种方法
chord_fish的博客
07-04 925
两栏布局左自适应右固定。 （1）左浮动，右固定 左边浮动，右边利用margin - left将右边的盒子顶出去，自适应添加了剪切效果 .main{ padding: 0; margin: 0; height: 100px; } .left{ float: left; width:100px; height: 100px; background: red; f
实现两栏布局的三种方法
qq_43412333的博客
05-15 702
标签 <divclass="box"> <divclass="box_left"></div> <divclass="box_right"></div> </div> 方法一calc ，注意calc左右要留空格 .box{ width: 100%; height: 100vh; background: rgb(88, 144, 196); ...
css实现两栏布局
weixin_30662011的博客
07-11 174
1、flex盒模型：左边固定宽度，右边自适应宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; di...
CSS实现两栏布局
syx_12的博客
08-17 224
两栏布局：左边固定，右边自适应。首先就会想到用flex布局。 方法1：flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
实现两栏布局、三栏布局的几种方式
挥别了青春的博客
10-26 497
两栏布局 1. float + margin .first-block { background: #F44336; width: 100px; height: 100px; float: left; } .second-block { background: #00BCD4; height:100%; margin-left:100px; } 2. float + ...
7种方式实现两栏布局
lxs19930928的博客
11-23 195
1: 浮动加上BFC(overflow: hidden) <style> #app { height: 500px; width: 100%; line-height: 500px; text-align: center; color: #ffffff; overflow: hidden; } .left { width: 200px; float: left;
两栏布局的实现
小嘟的博客
09-12 310
两栏布局 问：那么什么叫做两栏布局呢？ 答：一般将左侧一栏宽度固定，右边一栏宽度自适应称为两栏布局 课前预习：块级元素宽度自适应，高度需要手动设置（如不设置则由高度内容撑开） 本文规范：为了叙述方便，故以类名代表相应的元素 上课中： 第一种情况（浮动:float） CSS代码 /*宽度默认为铺满整个屏幕 / .outer{ height: 100px; } .left{ float: left; width: 200px;height: inherit; background: tomato; }
实现AS底部导航栏有几种方式
07-27
另一种方式是手动实现底部导航栏，需要在Activity的xml布局中添加BottomNavigationView控件，并设置相应的属性，如itemBackground、itemTextAppearanceActive、itemTextAppearanceInactive、itemTextColor和menu等\...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值