使用flexbox来根据内容的宽度创建span的方法
P粉726234648
P粉726234648 2023-08-15 12:26:13
[CSS3讨论组]
<p>我已经在宽度固定的flex-row父元素中使用了span和div</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.parent { display: flex; flex-direction: row; width: 230px; background-color: blue; } .child1 { background-color: red; } .child2 { min-width: 40px; }</pre> <pre class="brush:html;toolbar:false;">&lt;div class="parent"&gt; &lt;span class="child1"&gt;这是span中的一些文本&lt;/span&gt; &lt;div class="child2"/&gt; &lt;/div&gt;</pre> <p><br /></p> <p>我希望span始终与文本的宽度相同,而div则占据父元素剩余的整个宽度。现在(如您在代码片段中所见),当文本移到新行时,红色背景区域的宽度比文本宽。如何修复这段代码?我需要红色背景正好结束在文本的边缘</p>
P粉726234648
P粉726234648

全部回复(1)
P粉147747637

也许你可以将parent设置为网格并使用fr单位进行测量?

grid-template-columns: fit-content, 1fr

这将使文本容器的宽度与文本的确切宽度相同,并使剩余的容器占据剩余空间的1份(没有其他容器会占据100%的空间)。

对于行显示,只需将columns更改为rows。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号