css使用浮动布局时，使左侧盒子固定宽度，右侧盒子充满父盒子

最新推荐文章于 2024-05-26 15:42:37 发布
最新推荐文章于 2024-05-26 15:42:37 发布
阅读量472 收藏 1
点赞数
分类专栏： css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqSan123456789000/article/details/124690359
版权

在这里插入图片描述

  • 这里我将左侧盒子设为固定宽度，想让右侧盒子充满剩余的父盒子，（父盒子跟随窗口大小改变）
  • 如果直接将右侧盒子的宽度设为百分比的话，窗口宽度改变会使右侧盒子挤下来
  • 这时我们可以使用css3里的calc（）函数
width：calc(100%-左侧盒子占用的宽度) //如果有margin需要再减去margin占用的宽度
派蒙爱吃包菜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css_2盒子 浮动定点
qq_43382750的博客
08-10 478
css_2 优先级:继承性优先级最低(不管父类优先级如何) < *< 标签 < class < id < 行内 < !important 权重可以这样计算 通配符*和继承 为 0 0 0 0 标签 为 0 0 0 1 class 为 0 0 1 0 ID 为 0 1 0 0 行内 为 1 0 0 0 它们不能进位,一百个标签也不如一个class 元素和显示模式 块元素 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的
html盒子模型子元素怎么水平占满父元素_CSS 盒模型
weixin_29503627的博客
01-04 2674
常见盒模型区域书写元素内容区域：width+height盒子可以实体化的区域：width+height+padding+border (背景可显示)盒子实际占位的位置：width+height+padding+border+margin宽度 width!注意:如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度.<div> 元素等独占...
并列的两个盒子，一个有固定宽度，让另一个占满剩余宽度(grid、calc、外边距、flex)
Likkobest的博客
06-17 1064
grid：通过 grid-template-columns:(固定盒子的宽度)px auto 和 grid-column-gap:0 来实现。1.第一个盒子设置flot:left,第二个盒子设置flot:right,同时第二个盒子的宽度使用计算函数计算。外边距：给第一个的盒子设置flot:left，给第二个盒子设置一个左外边距，值为第一个盒子的宽度，第二个盒子宽度为auto。2.父级设置flex的情况下，第二个盒子的宽度直接使用计算函数即可。
如何让div右侧内容占据剩余空间
最新发布
星途码客的博客
05-26 393
基于float和Flexbox两种解决方案，让div块的右侧内容占据剩余全部空间
css实现左侧定宽盒子右边不定宽盒子占满
qq_40816649的博客
10-18 1138
方法一、浮动 左： float:left;width: 200px; 右： margin-left: 200px; 方法二、flex布局 父： display: flex; 左： width: 200px; 右： flex: 1; 方法三、position定位 父： position: relative; 左： width: 200px;display...
css布局------左边宽度不定,右边宽度自动填满剩余空间
weixin_30877755的博客
03-02 866
HTML <div class="container"> <div class="left"></div> <div class="right"></div></div> CSS /*方法1：浮动布局实现*/.container { overflow: hidden;}.left { float: left; ...
div三栏布局左中右通过float浮动来设置
09-25
本文将深入探讨如何使用`float`属性实现一个常见的三栏布局，即左侧、中间和右侧的布局。这个布局模式通常用于创建具有侧边栏和主要内容区域的页面。 首先，我们需要理解`float`属性的作用。`float`属性在CSS中主要...
css+div布局练习
04-07
1. 创建一个两列布局，左侧固定宽度，右侧自适应宽度。 2. 实现一个响应式布局，根据屏幕宽度自动调整元素的排列方式。 3. 使用Flexbox或Grid创建一个带有头、脚和侧栏的多部分布局。 4. 探索CSS变量、媒体查询等...
CSS 2.0 中文手册.zip
04-22
- **浮动**: `float` 属性允许元素浮动到其父元素的左侧或右侧，常用于创建多列布局。 - **清除**: 清除浮动（`clear`）用于防止元素被浮动元素影响，确保元素在页面上的正确位置。 ### 7. 定位与布局 - **定位**:...
第27章 CSS传统布局[下]
08-11
`float`属性用于让元素浮动到其父元素的左侧或右侧，常用于创建多列布局。元素浮动后，后续元素会尝试填充其留下的空间。但浮动会导致父元素的高度塌陷，需通过`clear`属性或添加clearfix类来解决。 5. **display...
CSS中的元素定位方法详解
12-13
可选值有left和right，元素会浮动到其父元素的左侧或右侧，直到碰到边框或其他浮动元素。不清除浮动可能会导致父元素高度塌陷。 4. 盒模型属性：包括边框border、内边距padding和外边距margin。边框可设置宽度、...
父容器宽度自适应,如何实现右边子容器宽度固定,左边子容器宽度自适应
weixin_42369612的博客
07-23 1402
关于盒子容器 我们之前遇到的"父容器宽度自适应,实现左边子容器宽度固定,右边子容器宽度自适应",很容易实现, 而我们用同样的方法去实现"父容器宽度自适应,如何实现右边子容器宽度固定,左边子容器宽度自适应",就会 发现有问题. 其实我们的方法根本没有问题,又因为我们习惯了先写左边的容器,而后写右边的容器,而浏览器的解析顺序 是从上到下的,这时候就会出现无论如何我们都无法达到自己的需求. 详解 ...
并列的两个盒子，一个有固定宽度，如何让另一个占满
m0_52518047的博客
03-05 1045
在开发的过程中，经常会遇到这样的需求，就是并列的两个盒子，一个有固定宽度，另一个盒子不指定宽度就可以占满其余的部分 父盒子给添加上flex属性，左边盒子指定宽度，给右边盒子加上flex:1属性就可以了 <style> .father{ width:100%; display:flex; /*flex布局*/ } .left{ background: red; width:200px; heigh
小白都能做到的使用css如何让一个盒子沾满剩余的空间
youhebuke225的博客
06-02 6410
css如何让一个盒子沾满剩余的空间 前提 html <div class="app"> <div class="header"></div> <div class="content"></div> </div> </div> css *{ margin: 0; padding: 0; } html,body{ height: 100%; } .app{ width: 100%; height: 100%;
css 铺满父元素的最好用的一种方式
DragonOfMoon的博客
07-11 2262
个人最喜欢用的一种方式就是： 父级元素设置position：relative; 子元素如下： 你也可以使用width：100%;height:100%; 但是这种方式方式会有一些问题，在工作时候会被同事的某些异样的代码影响到响应式。之后再补充我遇到的情况； 推荐使用定位这种方式。......
css三栏布局——两边宽度固定中间宽度自适应方法总结
qq_52622178的博客
03-31 4068
【方法一】 使用flex布局，是最简便的。 为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局，flex-direction：row表示布局的排列方式为按行排列。flex：1表示来分配剩余空间，5来表示占多少份数 //html代码 <div class="layout"> <header>#header</header> <div class="container"> <div
【css基础】实现左边div固定宽度 右边div自适应撑满剩下的宽度
hzxOnlineOk的博客
11-14 2585
简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点float 区别于其他三种，不需要父元素做容器grid 区别于其他三种，不需要设置子元素（左元素的）宽绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高flex 最简单。
CSS浮动遇到盒子被挤开问题
weixin_43779803的博客
07-17 2581
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .c{width: 500px;height: 500px;border: 1px solid;} .a{width: 200px;height: 200px;background-color: #f00;} .b{width: 300px.
理解HTML5盒子模型与CSS3布局
通过本节学习，应能够理解和应用盒子模型，知道每个盒子都有固定的大小，并且能够使用`<div>`标记来有效地组织和定位网页元素。 HTML5的盒子模型和CSS3的样式控制相结合，提供了强大的网页设计工具，使开发者能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值