写一前端功能 一组div（横向排列）在一个div中 只展示出来俩个 当鼠标发生滚动时这组div向右滚动展示其他的div 外面大盒子不动 里面小盒子动

可以使用CSS属性overflow-x:scroll来实现这个功能，例如：

HTML代码：

<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>

CSS代码：

.container {
width: 200px;
height: 100px;
overflow-x: scroll;
white-space: nowrap; /* 防止换行 */
}

.box {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ddd;
margin-right: 10px;
}

当鼠标滚动时，".container"中的所有".box"会水平滚动，展示出其他的div。

相关问题

css鼠标悬停一个div一组div横向过渡出现

一个常用的方法是使用CSS的:hover伪类和transition属性，例如：

HTML代码：

<div class="container">
   <div class="box">Box 1</div>
   <div class="box">Box 2</div>
   <div class="box">Box 3</div>
</div>

CSS代码：

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

.box {
   width: 100px;
   height: 100px;
   background-color: #ccc;
   margin: 10px;
   transition: transform 0.3s ease;
}

.box:hover {
   transform: scale(1.2);
}

这样当鼠标悬停在.box元素上时，它会从原来的大小缩放到1.2倍大小，伴随着0.3秒的过渡效果。

让两个div横向排列 一个顶部一个居中

可以使用 flex 布局来实现这个需求。首先，将两个 div 包裹在一个父容器中，设置该父容器的 `display` 属性为 `flex`，并设置 `flex-direction` 为 `row`，即可让两个子元素横向排列。然后，将上方的 div 的 `align-self` 属性设置为 `flex-start`，即可将其置于顶部，将下方的 div 的 `align-self` 属性设置为 `center`，即可将其居中。

HTML 代码示例：

<div class="container">
  <div class="top">顶部</div>
  <div class="middle">居中</div>
</div>

CSS 代码示例：

.container {
  display: flex;
  flex-direction: row;
}

.top {
  align-self: flex-start;
}

.middle {
  align-self: center;
}