如何用 CSS、HTML 和 JavaScript 实现父元素中子元素的双行排列，并添加省略号按钮展开隐藏部分？-js教程-PHP中文网

如何用 CSS、HTML 和 JavaScript 实现父元素中子元素的双行排列，并添加省略号按钮展开隐藏部分？

心靈之曲

发布： 2024-11-13 17:12:10

原创

839人浏览过

如何用 css、html 和 javascript 实现父元素中子元素的双行排列，并添加省略号按钮展开隐藏部分？

如何巧妙地在父元素中实现子元素的两行排列？

想要在父元素中将子元素排列成两行，并且初始时隐藏超出部分，在出现省略号按钮点击后展开显示，使用 css、html 和 javascript 即可实现。

html 结构

首先，创建一个外部视窗 div（container），其中包含一个“盛放” 两行内容块的容器（flex-container）。设置 container 的尺寸，并将其超出部分隐藏。

立即学习“Java免费学习笔记（深入）”；

css 样式

添加 css 样式，设置 flex-container 的宽度和高度，并使其以 flex 方式排列。设置子元素（称为 item）的大小和背景颜色。

javascript 交互

易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

接下来，使用 javascript 监听“更多”按钮的点击事件。当点击时，隐藏“更多”按钮，并为 container 添加一个“scroll”类，这会将 container 设置为可水平滚动。

完整代码

下面是完整的 html、css 和 javascript 代码：

html

<div id="container">
  <div id="flex-container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <!-- ... 子元素 -->
    <div id="more">...</div>
  </div>
</div>

登录后复制

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 实现父元素中子元素的双行排列，并添加省略号按钮展开隐藏部分？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何实现动态按钮悬停涟漪效果：CSS与JavaScript协作教程解决动态按钮悬停涟漪效果问题：CSS变量与JavaScript事件处理最佳实践 JavaScript工程化_打包工具配置 JavaScript_跨平台开发与Electron实战 JavaScript构建工具_Gulp任务流与插件开发