CSS——两栏布局

最新推荐文章于 2024-07-12 08:49:29 发布
最新推荐文章于 2024-07-12 08:49:29 发布
阅读量208 收藏
点赞数
分类专栏： 前端 文章标签： html css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goldgirly/article/details/105029093
版权
本文详细介绍了使用CSS实现两栏布局的四种常见方法：浮动和标准流、浮动与BFC、绝对定位以及Flex布局。每种方法都有其特点，如浮动布局和BFC布局具有良好的浏览器兼容性，而Flex布局则代码简洁、功能强大，但需要注意兼容性问题。
摘要由CSDN通过智能技术生成

目录


首先设置两栏left和main，以及footer和header。
在这里插入图片描述

1. 利用浮动和标准流

  1. main保留为标准流，因为普通块级元素本身的width+padding+border+margin会自动填充父元素容器的宽度
  2. left设置固定width并float: left，浮动元素允许块级元素和自己处于同一行，后面的main就会上浮和left并列
  3. main设置margin-left为left的宽度，空出left的位置。否则main内容占一整行，left会挡住一部分main的内容
        .left{
   
            width: 300px;
            float: left;
        }
        .
最低0.47元/天 解锁文章
CJYCathy
关注
专栏目录
css实现两栏布局
weixin_45732235的博客
03-25 560
✨实现效果 ✨具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>两列布局</title> <style type="text/css"> /* 根元素设置为border-box */ :root { box-sizing: border-box; } /* 告诉其他所有元素和伪元素继承其盒模型 */
CSS两栏布局
weixin_45732235的博客
03-11 344
左列定宽，右列自适应 方法1.浮动+margin实现 <div class="container"> <div class="left"></div> <div class="right"></div> </div> .left { width: 300px; height: 50vh; background-color: yellowgreen; float
使用CSS实现两栏布局：多种方法与最佳实践
最新发布
My_wife_QBL的博客
07-12 453
通过合理使用浮动、Flexbox和Grid布局，可以轻松实现两栏布局。每种方法都有其优势和适用场景，开发者可以根据具体需求选择合适的方法。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
CSS多栏布局-两栏布局和三栏布局
富朝阳的博客
05-14 2289
相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。
css--两栏布局易懂的5种方法
lixiaoqidecsdn的博客
01-13 1102
1.左侧固定，右侧自适应 <style> .left { width: 200px; height: 600px; background-color: rgb(247, 10, 10); float: left; } .right { height: 600px; margin-left: 200px; background-color: blue; .
CSS布局——两栏布局和三栏布局
Hoshizola的博客
05-28 1492
在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。 一、两栏布局 以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。 方案一：float+margin 1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏； 2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移； 3、为防止右元素被左元素挡住，需要给右元素加外边距。 这是最简单的一种布局方案。 html结构： <div class="box"> <div c
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1146
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，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 ，宽度固定设为
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
CSS——水平布局和垂直布局
surymy
11-17 3898
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
css布局之浮动模型&&左右两栏自适应布局
Jancy的博客
02-28 2359
一个元素浮动时，其他内容会“环绕”该元素，浮动元素要设置一个width。浮动元素会自动生成一个块级框（行内元素会转成块级元素）。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前如果出现浮动元素，则必须在该浮动元素之后（不能覆盖 )。如果浮动元素加一起太宽，会自动向下。垂直方向要顶头不能超过块区域，同样不能超过在它上面的浮动元素。浮动元素脱离文档流，不占据空间。不浮动的块级元素
Gild使用
qq_43677688的博客
02-18 307
三栏布局的六种方式
甜甜的是爱情呀
07-10 322
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。 要求：允许增加额外的DOM节点，但不能修改现有节点顺序。 <div class="container"> <div class="main"></div> ...
【总结】：CSS常用的两栏布局方法（最全面）
weixin_60297362的博客
03-23 4916
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽） 一、CSS两栏布局（左列定宽，右列自适应宽） 最终效果： 方法一：浮动+margin HTML： <div class="container"> <div class="left">定宽</div> <div class="right">自适应
CSS：两栏布局【表单】的四种方式：float/position/flex/grid
weixin_43932309的博客
10-31 1069
CSS：两栏布局的四种方式：float/position/flex/grid，主要针对表单提交。
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
前端笔记：Grid布局
Naisu的各种笔记
03-09 1万+
文章目录目的总结 目的 总结
Grid布局介绍
m0_52900946的博客
04-18 3万+
1、什么是Grid布局 ​     Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。 2、和flex布局的区别 ​     Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。 flex布局示
CSS布局技巧：打造两栏版面的四种方法
本章将介绍四种常见的CSS布局方法，用于创建两栏式布局，同时包含页首和页尾。这四种方法包括： 1. 浮动布局（Float Layout）：通过设置元素的`float`属性，如`float: left`或`float: right`，使元素在容器中浮动，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值