要实现父元素中子元素的两行排列，并且在内容超出父元素宽度时显示横向滚动条，可以使用HTML、CSS和JavaScript来完成。以下是实现步骤：
首先，创建一个父元素和多个子元素。
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
<div class="child">Item 5</div>
<div class="child">Item 6</div>
<div class="child">Item 7</div>
<div class="child">Item 8</div>
</div>
使用CSS来实现两行排列和横向滚动条。
.parent {
display: flex;
flex-wrap: wrap;
overflow-x: auto; /* 横向滚动条 */
width: 100%; /* 父元素宽度 */
max-height: 200px; /* 父元素最大高度，控制两行 */
}
.child {
flex: 0 0 auto; /* 子元素不伸缩 */
width: 100px; /* 子元素宽度 */
height: 50px; /* 子元素高度 */
margin: 5px; /* 子元素间距 */
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
如果你希望在特定条件下（例如点击按钮）展开或收起子元素，可以使用JavaScript来控制。
<button onclick="toggleExpand()">Toggle Expand</button>
function toggleExpand() {
const parent = document.querySelector('.parent');
parent.classList.toggle('expanded');
}
.parent.expanded {
max-height: none; /* 取消最大高度限制，展开所有子元素 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Row Layout with Horizontal Scroll</title>
<style>
.parent {
display: flex;
flex-wrap: wrap;
overflow-x: auto;
width: 100%;
max-height: 200px;
}
.child {
flex: 0 0 auto;
width: 100px;
height: 50px;
margin: 5px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.parent.expanded {
max-height: none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
<div class="child">Item 5</div>
<div class="child">Item 6</div>
<div class="child">Item 7</div>
<div class="child">Item 8</div>
</div>
<button onclick="toggleExpand()">Toggle Expand</button>
<script>
function toggleExpand() {
const parent = document.querySelector('.parent');
parent.classList.toggle('expanded');
}
</script>
</body>
</html>
display: flex; 和 flex-wrap: wrap;：使子元素在父元素中按行排列，超出宽度时换行。overflow-x: auto;：当内容超出父元素宽度时显示横向滚动条。max-height: 200px;：限制父元素的高度为两行的高度。flex: 0 0 auto;：确保子元素不会伸缩，保持固定宽度。toggleExpand 函数：通过切换类名来控制父元素的高度，实现展开和收起效果。通过以上步骤，你可以实现一个两行排列的子元素布局，并在内容超出时显示横向滚动条。