文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

css经典布局之左侧固定大小右侧自动适应

本文作者：IMWeb 赛冷思 原文出处：IMWeb社区 未经同意，禁止转载 最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构...，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等。...，右侧自适应 左侧固定，右侧自适应布局 左侧变窄时，右侧自动变宽；当左侧变宽时，右侧自动变窄，下面来实现一下： js代码，在这之前，需要注释css中的以下三行代码 .left{ position:relative; float...=doc.querySelector(".toggle-btn"), //左侧容器和右侧容器，实际上就只需要操作这两个元素 leftContainer=doc.querySelector

1.8K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等...，右侧自适应 左侧固定，右侧自适应布局 css代码 *{ margin: 0;...当左侧变窄时，右侧自动变宽；当左侧变宽时，右侧自动变窄，下面来实现一下： js代码，在这之前，需要注释css中的以下三行代码 .left{ position:relative; float...=doc.querySelector(".toggle-btn"), //左侧容器和右侧容器，实际上就只需要操作这两个元素 leftContainer=doc.querySelector

    2.7K00

    css左侧固定宽度，右侧自适应的几种实现方法

    左侧固定，右侧自适应或者右侧固定在，左侧自适应是一样的。这种布局很常见，而且面试过程中也经常会问到，这里我总结的方法一共有5种。要实现这种布局，也算比较简单。...下面列举几个常见的方法： 1.固定宽度区浮动，自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下： #wrap { overflow...这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响. ?...5.使用css3的calc计算元素宽度+浮动 calc()从字面我们可以把他理解为一个函数function。...前四种方法转载自老生长谈：css实现右侧固定宽度，左侧宽度自适应。这里主要是将各种方法进行汇总。我目前了解到的方法主要是这些，如果大家还有其他方法的请留言分享

    3.9K20

    【CSS】464- 5种 CSS 浮动和清除浮动的方法

    1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘...缺点：必须定义width或zoom:1，不能和position配合使用，因为超出的尺寸的会被隐藏。 建议：只推荐没有使用position或对overflow:hidden理解的朋友使用。...原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。 优点：简单，代码少，浏览器支持好，不容易出现怪问题。...5、父级div定义伪类:after和zoom ? 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。...建议：推荐使用，建议定义公共类，以减少CSS代码。

    2.2K20

    CSS 浮动布局和网格系统

    # 浮动布局的设计初衷 浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它。这种布局在报纸和杂志中很常见，因此 CSS 增加了浮动来实现这种效果。...（CSS 是一种排版约定） 浮动元素会被移出正常文档流，并被拉到容器边缘。文档流会重新排列，但是它会包围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列。...此外，要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。 # 容器折叠和清除浮动 # 理解容器折叠 浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。...要在 HTML 里添加不必要的标记，才能实现本应该由 CSS 实现的效果。 # 理解清除浮动 不用额外的 div 标签，还可以用伪元素（pseudo-element）来实现。...在清除浮动时使用 display: table 能够包含外边距，是因为利用了 CSS 的一些特性。创建一个 display:table 元素（或伪元素），也就在元素内隐式创建了一个表格行和一个单元格。

    1.6K10

    CSS中的浮动和清除浮动，梳理一下！

    第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。 浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！...浮动可以内联排列 浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。 ?...// css.box-wrapper { border: 5px solid red; } .box-wrapper .box { float: left; width: 100px;...那就需要我们清除浮动，来解决高度坍塌问题！ 清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。 clear如何清除浮动？...文字环绕效果 页面布局 浮动可以实现常规的多列布局，但个人推荐使用inline-block。 浮动更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应。 ?

    2.4K70

    CSS进阶内容—浮动和定位详解

    CSS进阶内容—浮动和定位详解 我们在学习了CSS的基本知识和盒子之后，就该了解一下网页的整体构成了 当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS的三种布局流派...网页布局的本质就是用CSS控制盒子的摆放来形成页面 CSS提供了三种流派来控制盒子： 普通流 浮动 定位 所谓普通流就是我们前面所学习的内容： 标签按照规定好的默认方式排序 块级元素独占一行 行级元素顺序排列...，遇到父元素边缘换行 接下来让我们走进浮动和定位的世界 浮动 首先我们为什么需要浮动呢？...，使浮动框移动至相应位置 浮动会紧贴着大盒子本身或是其他浮动盒子边缘 float：left/right 用来控制盒子浮动在左侧还是右侧 我们给出简单的代码示例： CSS的布局技巧和知识补充，希望能获得你的一些鼓励。

    2.9K10

    css布局使用

    ，对右侧栏添加有浮动。...对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。...设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。 对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。...通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...双飞翼布局(float + 负margin ) **原理说明**： 双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin

    3K90

    应用单细胞测序技术对左侧和右侧结直肠癌进行特征分析

    右侧结直肠癌(CRC；起源于盲肠、升结肠、肝曲)和左侧结直肠癌(起源于脾弯、降结肠、乙状结肠)通常被归为一种疾病，它们的预后和治疗结果有显著差异。...对3例左侧和3例右侧结直肠癌根治性手术中获得的6个样本中的27,927个细胞进行了scRNA-Seq检测，并构建了恶性结直肠癌的单细胞转录组图谱。...acc=GSE188711 文章选择3例左侧和3例右侧患者的27,927个单个人结直肠癌细胞进行综合分析，一共是6个样品。...发现几个细胞团在左侧和右侧的结直肠癌中都得到了丰富，共有13,488个单细胞起源于左侧CRC，而14,439个单个细胞起源于右侧CRC。...其它加分项 左侧和右侧结直肠癌细胞特异性表达的变化 将DEG的数目投影到t-SNE图上显示，发现第4簇癌细胞在结直肠癌的TME中表现出最显著的转录变化，这表明肿瘤细胞群在左侧和右侧的结直肠癌之间存在最本质的转录差异

    83710

    【从零开始的Qt开发指南】（十四）Qt 窗口之“三剑客”：工具栏、状态栏、浮动窗口进阶实战指南

    添加时指定默认停靠位置（左侧和右侧） this->addToolBar(Qt::LeftToolBarArea, toolBarLeft); this->addToolBar(Qt::RightToolBarArea...//仅允许停靠在左侧和右侧 toolBar2->setAllowedAreas(Qt::LeftToolBarArea | Qt::RightToolBarArea); //...QDockWidget("右侧面板", this); QDockWidget *dockBottom = new QDockWidget("底部面板", this); // 为每个浮动窗口添加内容...，中央部件显示对应的文件内容，右侧属性面板显示文件信息。...状态栏：左侧显示核心状态信息，右侧显示辅助信息；进度条仅在耗时操作时显示，避免占用空间。 浮动窗口：按功能分组，同一类功能的面板可合并为标签页；提供显示 / 隐藏切换，满足不同用户的布局需求。

    1.5K21

    CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

    ) 5.浮动体系 这里只说 FC 和定位体系。...这是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。...除了最常见的 CSS2.1 中的 BFC 和 IFC 之外，CSS3 中还增加了 GFC 和 FFC。 4.1.1 BFC： 前面已经说过了。...在 CSS2.1 中，有三种定位方案 ———— 普通流、浮动和绝对定位，下面分别对这三种布局简略说明一下： 普通流(Normal flow) 在普通流中，盒一个接着一个排列; 在块级格式化上下文里面，它们竖着排列...绝对定位 (Absolute positioning) 元素脱离普通流，并且不影响普通流的布局 它的定位相对于它的包含块，相关CSS属性：top，bottom，left 和 right； 如果元素为

    3.3K10

    【说站】css中clear属性是什么

    css中clear属性是什么 说明 1、用于规定元素哪一侧不允许浮动元素，默认值为none，表示不清除，左右两侧允许浮动元素。 2、确保当前元素的左右两侧没有浮动元素。...可选值 left清除左侧浮动元素对当前元素的影响 right清除右侧浮动元素对当前元素的影响 both清除左/右两侧浮动元素对当前元素的影响 实例 <!...200px;             height:200px;             background-color:chartreuse;             /*设置clear属性:使其位置不受左侧浮动元素的影响... */             /* clear: left; */             /*设置clear属性:使其位置不受右侧浮动元素的影响 */             /* clear: right...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏

    83320
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券