如何实现点击div2时向后扩展并使div1下移？

问题根源 #

你用float布局遇到的问题，本质是float元素的文档流特性导致的：当div2设置为width:100%时，它会占据父容器的全部宽度，而float:left的div1已经占据了左侧空间，div2没有足够的横向空间和div1并排，所以会直接被挤到下方，无法实现“扩展时div1平滑下移”的预期效果。

替代方案：使用Flex布局实现 #

Flex布局能更灵活地控制元素排列，通过切换容器的排列方向和元素宽度，就能实现你要的效果：

HTML结构

<div class="container">
  <div class="div-item div1">1</div>
  <div class="div-item div2">2</div>
</div>

CSS样式

/* 基础容器样式 */
.container {
  display: flex;
  gap: 15px; /* 两个div之间的间距，可按需调整 */
  transition: flex-direction 0.3s ease; /* 平滑切换排列方向 */
}

/* 通用div样式 */
.div-item {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

/* div1样式 */
.div1 {
  width: 220px;
  background-color: #666;
}

/* div2默认样式：占据剩余宽度 */
.div2 {
  flex: 1;
  background-color: #e74c3c;
  cursor: pointer;
  transition: width 0.3s ease;
}

/* 点击后的扩展状态 */
.container.expanded {
  flex-direction: column; /* 切换为纵向排列，div1自动下移 */
}

.div2.expanded {
  width: 100%; /* 占满父容器宽度 */
}

JavaScript交互逻辑

const div2 = document.querySelector('.div2');
const container = document.querySelector('.container');

div2.addEventListener('click', () => {
  // 切换扩展类
  div2.classList.toggle('expanded');
  container.classList.toggle('expanded');
});

效果说明 #

• 默认状态下，div1固定宽度，div2占据剩余横向空间
• 点击div2时，容器切换为纵向排列，div1下移，同时div2扩展为100%宽度，整个过程通过transition实现平滑过渡

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