css左右两栏分别滚动

2024-11-03

CSS 实现：两栏布局（一边固定，一边自适应）

☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <div class="main"></div> </body> √[实现]: // html 和 body 的高度默认为0,因此要先设置为100%,并且清除默认样式(margin:0; padding:0) html,body { /*width: 100%;*

在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <meta http-equiv=&quo

css 关于两栏布局，左边固定，右边自适应

好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它写出来,先说今天的吧.两栏布局,左边固定,右边自适应百度了一下,使用了http://www.zhangxinxu.com/wordpress/2010/03/纯css实现侧边栏分栏高度自动相等/ 这个原理制作侧栏,分栏登等高做法使用margin-bottom:赋值,和padding-bottom

css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录简单粗暴float来实现 absolute"离家出走"定位过去圣杯布局 - margin负边距高贵优雅flex轻松搞定 table表示不服气,凭什么我要被抛弃衍生 - display:table-cell; pc端定死宽?那inline-block携手width也是个好方法 * 以下汇

CSS实现两栏布局

写在前面两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layouts),凝胶布局(Jello layouts),绝对布局(absolute layouts),表格布局(table layouts). 所有源码在底部. 流体布局浏览器显示HTML元素,是从HTML文件最上面开始,从上往下沿元素流显示各个元素,像一个流体一样. 页面布局如下: <header>页

css布局: 两栏自适应高度

只使用css实现有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

css实现两栏布局，左侧固定宽，右侧自适应的7中方法

一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100p

CSS | 自适应两栏布局方法

html代码: <div class="main"> <div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div> <div class="right" style="background: #87CEEB;min-height: 300px;"&

css的两栏布局

经典的实现左边固定宽度,右边宽度自适应的几种方法利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; float: left; background-color: red; } .right{ margin-left: 50px; background-color: blue; } 2.利用position和margin属性 .parent{ position: relative; } .left{

CSS 实现左侧固定，右侧自适应两栏布局的方法

"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点. 常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性.另外一种思路是利用CSS中的calc()方法来动态设定宽度.还有一种思路是,利用CSS3中的新型布局flex layout与grid layout. 效果图: HTML布局: <div class="out

css布局 - 工作中常见的两栏布局案例及分析

突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕竟站在前辈肩膀上学习,我整理起来更轻松[哈哈].(然后我再说一些我能想到的处理方式,帮助我们在工作中应对不同的布局结构时,选择性的去找最适合自己页面布局的方法) 说在前面:为了更好的看出来两列结构,截图我都做了蓝线和红线的框选.颜色较深的换成了黄线.总之就是为了让你一眼看出来,哪块和哪块.适合布局萌

css实现常用的两栏三栏布局

1.两栏 <div class="wrapper"> <div class="half left">left box <p>自适应</p> </div> <div class="half right">right box 固定</div> </div> 1.1.左侧宽度固定,右侧自适应方式一.float+margin .wrapper{ width:

css实现等高布局两栏自适应布局三栏自适应布局

等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>...</h1> <p>...</p> <div class="bottom"></div> </div> </div> 1.padding补值法 css代码如下: .wrapper{ width: 100%;

七种CSS左侧固定,右侧自适应两栏布局

一两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="wrapper" id="wrapper"> <div class="left"> 左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大. </d

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文

【CSS】三栏/两栏宽高自适应布局大全

页面布局注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间不用给宽,设置margin左右留出位置) html部分,center放到后面 <section class="wrapper"> <div class="left">left</div> <div class="right"

css两栏布局、圣杯布局、双飞翼布局

最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .left { float: left; width: 100px; height: 100px; background-color: red; } .box1 .right { margin-left: 100px; height: 100px; background-color: green; }

CSS 实现：两栏布局（等宽布局）

☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> <div class="col-2"></div> </div> √[实现]: ♪ 两栏等宽布局(三栏等宽同理) ① float 布局 .col-1, .col-2 { width: 50%; // 各占一半,尺寸相同 float: left; // 都脱

如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码具体实现效果展示如下: 1.二栏布局-flex弹性布局  <div class="title">flex弹性布局:</div> <div class="box1"> <

你所不知道的 CSS 阴影技巧与细节滚动视差？CSS 不在话下神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置前端XSS相关整理委托入门案例

你所不知道的 CSS 阴影技巧与细节关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是之前的文章没有覆盖到的新内容,而且有一些很有意思,遂打算再起一篇. 本文的题目是 CSS 阴影技巧与细节.CSS 阴影,却不一定是 box-shadow 与 filter:drop-shadow,为