< 返回新闻公共列表
纯CSS让子元素突破父元素的宽度限制
发布时间:2022-01-25 12:15:58
亿胜云 提供香港/国内多地区BGP 高防云 CDN 隐藏源 游戏盾可隐藏IP加端口类通讯应用
这篇文章主要介绍了纯CSS让子元素突破父元素的宽度限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在写样式中,我们可以经常看到这样的情况
代码如下
父元素
子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素
如果你仔细思考过这个现象的话,why? 可能会问子元素不应该撑开父元素的宽度吗?就想撑开父元素的高度一样。why? 那么如何让这个子元素的父元素撑开这个宽度呢?这里提供两种解决方案。
1. display: inline-block
布局样式如下
Document
结果如图,box3和box4撑开了box2的宽度
2. display: inline-flex
布局样式如下
Document
效果如下图
文章来源:脚本之家,原文链接:https://www.jb51.net/css/743595.html