实现css左中右三列布局支持各自下拉

2024-09-01

css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等

1.前言作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会有需要修改的地方请谅解.三栏布局顾名思义,就是左右两侧宽高固定,中间一列居中切随着浏览器页面变化.下面来看下具体的实现方法: 2.具体实现方法实现效果如下: (1)绝对定位方法 <div class="box"> <div class="left"&

CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

使用浮动布局来实现左侧元素与右侧元素优先渲染,分别向左和向右浮动中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度,就可以将新元素调整到正确的位置. html部分: <div class="container"> <div class="left">this is left</div> &l

HTML/CSS学习之三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <di

css之页面三列布局

左右两边宽度固定,中间自适应第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class="middle"></div> <div class="right"></div> css代码 .left { height: 200px; width: 300px; background-color: blue; positio

CSS设计一个三列布局的页面

探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Reset 03 */ 04 /** 清除内外边距 **/ 05 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 06 dl, dt, dd, ul, ol, li, /* list elemen

css之页面三列布局之左右两边宽度固定，中间自适应

左右两边宽度固定,中间自适应左右两边绝对定位可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814.html) table布局 grid布局 (https://www.w3cplus.com/css3/line-base-placement-layout.html) 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> &l

css之页面三列布局之左右上下高度固定，中间自适应

第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:%; margin:; padding: } #dHead { height:100px; line-height:100px; background:#; width:%;

记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样当屏幕大于600px时,是这样我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

css常见的各种布局下----三列布局

css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不够称不开整个宽度 1.1.2 左右固定部位,使用margin-left :负数,使其左右靠齐 1.1.3 中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度 <!DOCTYPE HTML> <html lang="en-U

简单的CSS网页布局--三列布局

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三列自适应</title> <style type="text/c

三列布局，读《css那些事儿》

1.两列定宽,中间自适应要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度并浮动,mainbox中的.contentd的默认宽度设置为值(auto),margin左右所留的空白等于两列的宽度,并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边. <!DOCTYPE html> <html lang="en"> <head>

DIV左、中、右三列布局的各类情况说明

一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> <p>div三列布局的左列</p> </div> </div> <div id="middle"> <div id="innerMiddle"> <p>div三列布局的中列</p>

CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-column by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动中间元素在文档流的最

CSS常用布局方式-两列布局、三列布局

CSS基础 2.几种布局方式1)table布局当年主流的布局方式,第一种是通过table tr td布局示例: <style type="text/css"> table{ width: 800px; height: 300px; border-collapse: collapse; } .left{ background-color: red; } .right{ background-color: blue; } </style> <body>

DIV+CSS 网页布局之：三列布局

1.宽度自适应三列布局三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局,其实和两列.三列的布局模式是一样的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三列布局</title> <style> *{m

css实现三列布局，左右固定值，中间自适应。

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p

css三列布局之双飞翼pk圣杯

三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也没什么问题,但是html中div的顺序却是 <div class = "left"></div> <div class = "right"></div> <div class = "main"&g

CSS三列布局之左右宽度固定，中间元素自适应问题

最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度.例如以下代码就可以实现我们想要的三列效果啦. <!DOCTYPE html> <html lang="en"> <head> <meta chars

【css】css2实现两列三列布局的方法

前言对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要用基本的 css2 中的属性布局,傻掉了... 要求:两列布局,左边定宽,右边自适应 html 布局如下 <div id="father"> <div id="left">我是定宽左</div> <div id="ri

慕课笔记利用css进行布局【三列布局】

三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*三列的布局样式*/ /*position:absolute定位*/ .left2{width:200px;height:500px;background:#f0f;position:abs

实现css左中右三列布局 支持各自下拉

热门专题

实现css左中右三列布局支持各自下拉