div自适应占满剩余宽度；当width:100%不适用时

拼搏现实的明天。 2024-03-22 14:49 95阅读 0赞

**因为我打算把下图中红色框中的按钮放到这一行的最后**

**![e6cfcde233a443c093ede247004668e5.png][]**

**但是我给按钮中的div给width为100%时会出现下图情况，就是位置会跑乱**

**![65c22c9599954d73b6fad12b3f6b8a9d.png][]**

**后面将width:100%;换为flex-grow: 1;效果如下图**

**![173ae3deae8246b6892cda814eb47587.png][]**

**![eb811056d9884573b8b6283e0895cbe1.png][]**

**flex-grow:**

**![82edc3bf980f4b82b98597b26638c533.png][]**

**具体可参考[flex-grow - CSS：层叠样式表 | MDN (mozilla.org)][flex-grow - CSS_ _ MDN _mozilla.org]**

[e6cfcde233a443c093ede247004668e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c3b6d77250a94383bf83d2e84e605486.png
[65c22c9599954d73b6fad12b3f6b8a9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c041d7d3461a4ec18561c1bbec93b97f.png
[173ae3deae8246b6892cda814eb47587.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2766a3a1d8914e55821cbbcf530076c9.png
[eb811056d9884573b8b6283e0895cbe1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d996dc546c5a4cbe9f22b2d7912eafb1.png
[82edc3bf980f4b82b98597b26638c533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d73e6b5c052d4f169687aae8f5302d6c.png
[flex-grow - CSS_ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow

发表评论取消回复

表情：

评论列表（有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue根节点div不占满屏幕

题现象： ![在这里插入图片描述][20190822171847606.png] 问题代码： <template> <div class="...

朱雀/ 2024年04月17日 05:33/ 0 赞/ 69 阅读

相关 div自适应占满剩余宽度；当width:100%不适用时

因为我打算把下图中红色框中的按钮放到这一行的最后 ![e6cfcde233a443c093ede247004668e5.png][] 但是我给按钮中的div给width为

拼搏现实的明天。/ 2024年03月22日 14:49/ 0 赞/ 96 阅读

相关 div背景图自适应占满

css代码： background-image: url(../imgs/footerkuang.png); background-repeat: no-re

女爷i/ 2022年12月21日 04:54/ 0 赞/ 173 阅读

相关 ImageView宽度填满屏幕，高度自适应

> 原文链接：[http://blog.csdn.net/easion\_zms/article/details/50263409\comments][http_blog.cs

你的名字/ 2022年06月17日 04:45/ 0 赞/ 313 阅读

相关 div 不能占满整个页面

在页面中，有时候我们想自己写个遮罩层，让它的宽度和高度都占满整个可见页面区域，css设置好了，但是还是没有得到想要的效果。遮罩层用<div>表示，是body的直接子元素

小咪咪/ 2022年06月08日 03:52/ 0 赞/ 304 阅读

相关 div 自适应高度自动填充剩余高度

概述：记录一下，别人已经写得比较好了，下次方便检索地址：[http://www.cnblogs.com/pangguoming/p/5695184.html][htt

深藏阁楼爱情的钟/ 2022年05月18日 04:53/ 0 赞/ 291 阅读

相关 div自适应宽度

.item\_sel\{ min-width: 141px; width: auto; \_width:141px; white

小灰灰/ 2022年05月16日 05:37/ 0 赞/ 412 阅读

相关 div宽度自适应

自适应宽度的层不要指定宽度和float属性自适应宽度的层物理的位置放在最下面自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象

r囧r小猫/ 2022年05月15日 14:47/ 0 赞/ 350 阅读

相关同行div，左边自适应，右边固定宽度

css: .left\{ width: 100%; float: left; margin-right: -132px; \} .lcon

本是古典何须时尚/ 2022年01月28日 04:53/ 0 赞/ 644 阅读

相关 div嵌套ul时div的宽度和高度自适应

div中嵌套ul时div的宽度和高度随着ul里元素的变化而变化，下面是一个事例，可以改变li元素的内容和个数去验证： <!DOCTYPE html PUBLIC "-//W3

比眉伴天荒/ 2021年06月24日 14:36/ 0 赞/ 631 阅读