如何巧妙地在父元素中实现子元素的两行排列？
想要在父元素中将子元素排列成两行，并且初始时隐藏超出部分，在出现省略号按钮点击后展开显示，使用 css、html 和 javascript 即可实现。
html 结构
首先，创建一个外部视窗 div（container），其中包含一个“盛放” 两行内容块的容器（flex-container）。设置 container 的尺寸，并将其超出部分隐藏。
立即学习“Java免费学习笔记（深入）”；
css 样式
添加 css 样式，设置 flex-container 的宽度和高度，并使其以 flex 方式排列。设置子元素（称为 item）的大小和背景颜色。
javascript 交互
接下来，使用 javascript 监听“更多”按钮的点击事件。当点击时，隐藏“更多”按钮，并为 container 添加一个“scroll”类，这会将 container 设置为可水平滚动。
完整代码
下面是完整的 html、css 和 javascript 代码：
html
item1item2...
css
#container { width: 400px; height: 200px; border: 1px solid red; position: relative;}#flex-container { width: 800px; height: 200px; display: flex; flex-wrap: wrap; justify-content: space-around;}#flex-container .item { width: 150px; text-align: center; height: 94px; display: flex-item;}#more { display: block; position: absolute; right: 10px; width: 80px; height: 30px; background: green; border-radius: 5px; text-align: center; color: white; cursor: pointer;}
javascript
document.getElementById("more").onclick = function() { this.style.display = "none"; document.getElementById("container").className = "scroll";}
通过这种方法，你可以在父元素中轻松实现子元素的两行排列，并使超出部分在初始状态下隐藏。点击省略号按钮即可在出现横向滚动条的同时显示出隐藏部分。
以上就是如何用 CSS、HTML 和 JavaScript 实现父元素中子元素的双行排列，并添加省略号按钮展开隐藏部分？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497524.html
微信扫一扫 
支付宝扫一扫 
