css设置两个div，一个左侧宽度固定，第二个宽度自适应

最新推荐文章于 2025-03-02 09:05:31 发布

原创最新推荐文章于 2025-03-02 09:05:31 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css布局

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了实现网页中左右布局的三种常见方法：使用浮动、通过cacl计算宽度以及利用flex布局特性。每种方法都提供了简洁的代码示例。

三种方法：1、浮动 2、cacl计算 3、flex布局。

</div>

① 浮动

<style>

.left {float: left; width: 200px;} .right {margin-left: 200px;}

</style>

② cacl

<style>

.left {float: left; width: 200px;} .right {width: cacl(100% - 200px);float: right}

</style>

③flex

<style>

.container {display: flex;} .left {flex: 0 0 200px;} .right {flex: 1;}

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

X_weiheng

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS | CSS实现两栏布局（左边定宽右边自适应，左右成比自适应）

m0_61811926的博客

01-11

778

flex 布局的默认主轴方向为 row ，所以 flex-basis 属性默认是控制元素的 width。2.利用浮动+margin。一、左边定宽右边自适应。5.table 布局。

如何使用CSS实现一个自适应两栏布局

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-07

1663

通过上述内容的学习，我们不仅了解了自适应两栏布局的基本原理和实现方法，还探索了如何在实际项目中应用这些技术来提高用户体验。自适应两栏布局指的是两个主要的栏目（通常是一个窄的侧边栏和一个宽的内容区），它们可以根据浏览器窗口的大小自动调整自己的宽度，从而保证在任何设备上都有良好的视觉效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在不同屏幕尺寸下，可以通过调整侧边栏和内容区的宽度，甚至改变布局方向，来优化显示效果。专栏系列（点击解锁）

参与评论您还未登录，请先登录后发表或查看评论

css+div自适应窗口宽度

04-29

css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度

CSS 实现div宽度根据内容自适应

09-24

最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下

页面布局--左边固定右边自适应两栏布局

qq_26702033的博客

03-07

1321

[转载]原文链接总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。基础代码： HTML <div class="wrapper wrapper-inline-block" id="wrapper"> <div class...

CSS两栏布局(左边宽度固定，右边自适应)

m0_74418779的博客

01-27

2848

CSS实现两栏布局(左边宽度固定，右边自适应)

CSS实现菜单背景自适应宽度的方法

09-24

最后，为了演示不同长度的菜单项，第二个`.load`类的`<div>`被设置了`top:100px`，以便于在页面上展示不同的效果。通过改变`<span>`内的文本内容，我们可以看到背景图片的宽度会随着文字的增加而相应扩展。总之，...

CSS三栏布局探讨——中间固定宽度两边自适应宽度

09-25

例如，通过设置左右两个div为固定宽度并浮动，中间的div则自动填充剩余的空间。然而，今天的主题是中间栏固定宽度，两边栏自适应宽度。这种布局适用于某些场景，比如中间栏需要保持特定宽度以展示固定内容，而两侧...

HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例

12-13

本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...

如何实现一个两栏布局（左侧固定宽度，右侧自适应）？

破损的天堂鸟博客

03-02

1492

现代项目首选：优先使用Flexbox或Grid布局，代码简洁且维护性强。兼容性优先：选择浮动+边距或绝对定位法，适配老旧浏览器。复杂场景扩展：Grid布局适合多列嵌套或响应式断点设计。高度自适应需求：Flexbox天然支持等高，避免手动计算高度。通过以上方法组合，可灵活应对不同项目需求和浏览器兼容性要求。实际开发中建议结合CSS预处理器（如Sass）或PostCSS插件增强代码可维护性。

[ CSS ] div宽度自适应!

杨有梦的博客

03-24

9097

偶尔朋友得一题目，关于div的宽度自适应. 原文出处:http://chaoqunz.blog.163.com/blog/static/6154877720096308422202/ 感谢原创作者! 1.宽度自适应的条件 自适应宽度的层不要指定宽度和float属性 自适应宽度的层物理的位置放在最下面 自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象，i

CSS实现左侧固定，右侧自适应(5种方法)

weixin_52512511的博客

08-13

6329

【代码】CSS实现左侧固定，右侧自适应(5种方法)

css之左边定宽右边自适应

weixin_34221073的博客

09-13

229

css之左边定宽右边自适应 ###html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

Css实现div宽度自适应

qq_54855933的博客

07-03

2157

今天开发过程中遇上一个需求，要求一个父元素包含三个div，div并排分布，大小相等，在父元素中居中，每个div最大宽度为480px，要求能随着屏幕尺寸变化等比例变化。解决措施的话，就是利用css中的flex布局解决。/*最大宽度，因为是三个，3*480*//* 在Flex容器中允许盒子缩小 *//* 使盒子等比例填充空间 *//* 盒子之间的间隔 *//* 设置最大宽度 *//*溢出添加导航条*//*设置距顶高度*//*div的高度*/

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

weixin_33735077的博客

08-16

1347

总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。关于最终的效果，可以查看这里常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的c...

css左边固定，右边自适应

安小漠

03-02

2524

css左边固定，右边自适应HTML页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></di

div左右布局

weixin_34378045的博客

11-14

1610

一、左右定宽布局：在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一个空元素，然后在这个空元素上定义cl...

div+css 常用三种自动适应宽度分栏

dgk62408的博客

11-07

444

CSS两列布局，右侧固定，左侧自适应宽度 <divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> <divstyle="width:200px; float:right; background:#090">这是右侧的...

css简单布局（左侧固定右侧自适应）

messenger的博客

07-28

4876

在进行网页布局的时候，很多时候需要时候需要实现左侧和右侧分列的页面布局，此文列举了几种多栏自适应布局的方法。。。 1.首先举例一种最简单的方法，利用浮动（或者绝对定位）的元素脱离文档属性，加上margin外边距方法实现左右并排列浮动代码： .left{float:left; background-color:green; width:200px; heigh

宽度自适应随另一个div的变化而变化

最新发布

07-23

<think>我们有一个需求：实现一个div的宽度自适应跟随另一个div的变化。也就是说，当第一个div的宽度改变时，第二个div的宽度也随之改变，保持某种关系（例如相等，或者按照一定比例等）。根据引用[1]和[2]中提到的自适应布局，我们可以使用多种方法来实现。这里我们假设两个div是兄弟关系，并且它们在同一行排列。常见的布局方法有： 1. 使用flex布局 2. 使用grid布局 3. 使用float（但现代布局中不推荐） 4. 使用绝对定位（如引用[1]中提到的）结合calc计算 5. 使用表格布局（不推荐，但也可以实现）但是，我们的需求是“一个div跟随另一个div变化”，这里可能有两种情况： a) 两个div是兄弟关系，其中一个宽度固定，另一个自适应剩余宽度（常见两列布局）。 b) 两个div不一定有直接关系，但希望一个div的宽度总是等于另一个div的宽度。根据引用[1]中提到的左侧固定、右侧自适应的两列布局，我们可以实现情况a。但用户的需求可能是情况b，即让一个div的宽度等于另一个div的宽度（无论它们是什么关系）。对于情况b，我们可以使用JavaScript来监听第一个div的宽度变化，然后设置第二个div的宽度。但是，如果希望用纯CSS实现，则比较困难，因为CSS本身没有提供直接让一个元素宽度等于另一个元素宽度的机制（除非它们有特定的父子关系或兄弟关系，并且通过继承或某些布局特性）。然而，如果我们能改变结构，比如将两个div都包裹在一个容器中，并利用一些布局特性，或许可以实现。但更常见的还是使用JavaScript。考虑到引用中主要提供的是CSS方法，并且用户要求宽度自适应，我们首先考虑使用CSS布局技术来实现常见情况（即情况a：两列布局，一个固定，另一个自适应）。如果用户的需求是情况b（两个div宽度相等，且无特定关系），则可能需要使用JavaScript。下面我们分别提供两种情况的解决方案：情况a：两个div是兄弟关系，一个固定宽度，另一个自适应剩余宽度（即跟随剩余空间变化）我们可以使用flex布局： HTML结构： ```html <div class="container"> <div class="fixed-div">固定宽度</div> <div class="auto-div">自适应宽度</div> </div> ``` CSS: ```css .container { display: flex; /* 使用flex布局 */ } .fixed-div { width: 200px; /* 固定宽度 */ /* 也可以设置flex-shrink:0; 防止缩小 */ } .auto-div { flex: 1; /* 自适应剩余空间 */ } ``` 这样，当固定宽度的div改变宽度时（比如通过JS修改），自适应的div会自动填充剩余空间。情况b：两个div无特定关系，但希望一个div的宽度等于另一个div的宽度（即同步宽度）我们可以使用JavaScript来监听第一个div的宽度变化，然后设置第二个div的宽度。例如： ```html <div id="div1">第一个div，宽度会变化</div> <div id="div2">第二个div，宽度跟随div1</div> ``` 使用JavaScript（假设使用ResizeObserver来监听尺寸变化）： ```javascript // 获取两个div const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); // 创建一个ResizeObserver实例 const observer = new ResizeObserver(entries => { for (let entry of entries) { // 当div1的宽度变化时，设置div2的宽度 const width = entry.contentRect.width; div2.style.width = `${width}px`; } }); // 开始观察div1 observer.observe(div1); ``` 但是，如果用户希望用纯CSS实现，且两个div是父子关系，我们可以利用一些技巧，比如子元素宽度100%继承父元素宽度。但如果是兄弟关系，则没有直接的方法。另外，引用[5]中提到了一个宽度由子元素决定的div，但这里我们是要让一个div跟随另一个div，所以不适用。总结： 1. 如果两个div是兄弟关系，并且一个固定另一个自适应剩余空间，使用flex布局。 2. 如果两个div无特定关系，需要宽度同步，使用JavaScript（推荐ResizeObserver）。考虑到用户的问题描述是“实现一个div的宽度自适应跟随另一个div的变化”，这里可能更倾向于情况b（同步宽度），但情况a（自适应剩余宽度）也是常见的。因此，我们需要根据实际结构来选择方法。下面我们将提供两种方法的详细代码示例。注意：如果用户要求纯CSS且两个div是兄弟关系，我们还可以考虑使用grid布局，但grid布局中设置一个固定一个自适应也很容易，但同步两个网格项的宽度并不直接。所以同步宽度还是需要JS。因此，我们分情况给出方案：方案一（使用flex布局，适用于一个固定另一个自适应剩余空间）：见上面的代码。方案二（使用JavaScript，适用于两个div宽度同步）：使用ResizeObserver监听源div的宽度变化，然后设置目标div的宽度。但是，如果两个div在同一个flex容器中，并且我们希望它们宽度相等，可以设置相同的flex-basis或者使用grid布局的等宽列。但这里要求一个跟随另一个变化，即一个变化另一个也跟着变，且变化的值是任意的（不一定相等，但这里我们假设相等），那么JS是更通用的方法。因此，我们给出两种实现方式。另外，如果用户希望两个div的宽度始终保持一致，并且它们在同一行，我们也可以考虑使用table布局（将容器设置为display: table，两个div设置为display: table-cell），这样它们就会等宽。但注意，table-cell会自动等宽，所以当其中一个内容变宽时，两个都会变宽。但这样是相互影响的，而不是一个跟随另一个（因为两者是同时变化的）。所以这种方法适用于希望两个div等宽且同时变化的情况，但无法控制一个跟随另一个（因为两者是同步的，没有主从关系）。因此，如果用户有明确的主从关系（一个div的宽度变化驱动另一个变化），那么使用JavaScript是更合适的。下面我们给出两种情况的代码示例：示例1：使用flex布局实现左侧固定，右侧自适应（情况a）示例2：使用JavaScript实现一个div宽度跟随另一个div（情况b）请用户根据实际需求选择。</think>要实现一个 div 的宽度自适应跟随另一个 div 的变化，可以使用以下方法，根据布局结构选择合适方案： ### 方法一：Flex 弹性布局（推荐） ```html <div class="container"> <div class="fixed-div">固定宽度元素</div> <div class="auto-div">自适应宽度元素</div> </div> <style> .container { display: flex; /* 启用弹性布局 */ } .fixed-div { width: 200px; /* 固定宽度 */ background: #eee; } .auto-div { flex: 1; /* 自动填充剩余空间 */ background: #ddd; } </style> ``` **原理**：通过 Flex 布局的 `flex:1` 属性，让右侧 div 自动填充容器剩余空间[^1][^2]。 ### 方法二：Grid 网格布局 ```html <div class="grid-container"> <div class="fixed">固定宽度</div> <div class="auto">自适应宽度</div> </div> <style> .grid-container { display: grid; grid-template-columns: 200px 1fr; /* 第一列固定，第二列自适应 */ } </style> ``` **原理**：`1fr` 单位自动分配可用空间[^1]。 ### 方法三：浮动 + 边距（传统方案） ```html <div class="fixed-float">固定宽度</div> <div class="auto-margin">自适应宽度</div> <style> .fixed-float { float: left; width: 200px; } .auto-margin { margin-left: 200px; /* 边距等于固定元素宽度 */ } </style> ``` ### 方法四：绝对定位（特定场景） ```html <div class="relative-container"> <div class="abs-fixed">固定宽度</div> <div class="auto-content">自适应内容</div> </div> <style> .relative-container { position: relative; } .abs-fixed { position: absolute; width: 200px; left: 0; } .auto-content { margin-left: 200px; /* 留出固定元素空间 */ } </style> ``` ### 响应式注意事项当需要跟随窗口大小变化时，可结合媒体查询： ```css @media (max-width: 768px) { .fixed-div { width: 100px; /* 小屏幕调整固定宽度 */ } } ``` ### 动态宽度同步（JS方案）若需实时同步两个独立元素的宽度： ```javascript const targetDiv = document.querySelector('.auto-div'); const sourceDiv = document.querySelector('.fixed-div'); // 使用ResizeObserver监听宽度变化 const observer = new ResizeObserver(entries => { targetDiv.style.width = entries[0].contentRect.width + 'px'; }); observer.observe(sourceDiv); ``` **关键点总结**： 1. Flex/Grid 是现代布局的首选方案[^1][^2] 2. 浮动布局需清除浮动副作用 3. 绝对定位需配合父容器相对定位 4. JS 方案适用于动态内容变化场景