如何仅用CSS实现点击切换div左右移动效果

可以利用CSS的复选框伪类(:checked)结合兄弟选择器来实现，不需要JS。具体实现步骤和代码如下：

HTML结构 #

先准备一个隐藏的复选框作为点击触发器，再把.div1和.div2放在同一个容器里，方便统一控制位移：

<!-- 隐藏的复选框，用来记录展开/收起状态 -->
<input type="checkbox" id="toggle-trigger" class="toggle-checkbox">
<!-- 点击触发的按钮，和复选框关联 -->
<label for="toggle-trigger" class="toggle-btn">点击展开/收起</label>
<!-- 包裹两个div的容器，控制整体移动 -->
<div class="div-container">
  <div class="div1">Div 1 内容</div>
  <div class="div2">Div 2 内容</div>
</div>

CSS样式 #

/* 隐藏复选框，只用来做状态触发 */
.toggle-checkbox {
  display: none;
}

/* 自定义触发按钮的样式 */
.toggle-btn {
  cursor: pointer;
  padding: 8px 16px;
  background: #eee;
  border-radius: 4px;
}

/* 容器初始状态（收起）：靠左，添加过渡动画让移动更平滑 */
.div-container {
  position: relative;
  left: 0;
  transition: left 0.3s ease;
  margin-top: 10px;
}

/* 保留你原有的样式，调整div2的定位基准为容器 */
.div1 {
  position: relative;
  width: 200px;
  height: 100px;
  background: #ccc;
  padding: 10px;
}

.div2 {
  position: absolute;
  top: 0;
  right: -100px;
  width: 100px;
  height: 100px;
  background: #999;
  padding: 10px;
}

/* 复选框被选中时（展开状态），容器向右移动 */
.toggle-checkbox:checked ~ .div-container {
  left: 200px;
}

实现原理 #

• 用隐藏的复选框作为状态开关，点击关联的<label>会切换复选框的checked状态
• 通过CSS的:checked伪类结合兄弟选择器~，选中容器并修改left属性实现位移
• transition属性让位移过程平滑过渡，提升交互感

你可以根据需求调整left的位移数值、过渡时长，也可以修改两个div的尺寸、定位方式来适配自己的布局。

内容的提问来源于stack exchange，提问作者EMahan K