如何实现父元素内子元素两行排列，并添加省略号按钮显示隐藏内容？

大家好，我们又见面了啊~本文《如何实现父元素内子元素两行排列，并添加省略号按钮显示隐藏内容？ 》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

如何在父元素内实现子元素的两行排列？

现有的布局中，子元素需要在父元素内两行排列。同时，超出部分一开始需要隐藏，在父元素容器内显示省略号按钮。点击此按钮后，隐藏部分应出现，并出现横向滚动条。

解决方案

1. 创建父元素容器

   创建一个称为 "container" 的 div，并设置其宽度、高度和边框。将其设为 Initially Hidden。

2. 创建子元素容器

   在 "container" 内创建另一个 div，称为 "flex-container"。设置其宽度和高度，并使用 flexbox 布局使其子元素两行排列。

3. 创建子元素

   在 "flex-container" 内创建所需的子元素，并为其设置样式，使其居中且有背景色。

4. 创建省略号按钮

   创建另一个 div，称为 "more"，作为一个省略号按钮。对其进行绝对定位，并在点击时显示隐藏的部分。

5. 添加 JavaScript

   使用 JavaScript 监听 "more" 按钮的点击事件。当点击该按钮时，隐藏它并为 "container" 添加一个 "scroll" 类，这将启用横向滚动。

具体代码实现：

HTML：

<div id="container" class="hidden">
  <div id="flex-container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
    <div class="item">item10</div>
    <div id="more">...</div>
  </div>
</div>

CSS：

#container {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

#container.hidden {
  overflow-x: hidden;
  overflow-y: hidden;
}

#container.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

#flex-container {
  width: 800px;
  height: 200px;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#flex-container .item {
  width: 150px;
  text-align: center;
  background: yellow;
  height: 94px;
  display: flex-item;
}

#more {
  display: block;
  position: absolute;
  top: 160px;
  right: 10px;
  z-index: 5;
  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";
};

本篇关于《如何实现父元素内子元素两行排列，并添加省略号按钮显示隐藏内容？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！