不使用Flexbox实现Div水平排列及React路由动画抖动问题求助

1. 不使用flexbox实现div水平渲染的几种方案 #

不用flexbox的话，有好几种经典方法可以实现div的水平排列，我给你列几个常用的：

• display: inline-block方案：
  给需要水平排列的div设置inline-block，它既保留块级元素的宽高特性，又能像行内元素一样横向排列。注意要处理元素间的默认空白间隙，比如给父容器设置font-size: 0，子元素再恢复正常字号：

  .parent-container {
    font-size: 0; /* 消除子元素间的空白间隙 */
  }
  .horizontal-div {
    display: inline-block;
    font-size: 16px; /* 恢复正常字号 */
    width: 200px;
    height: 100px;
    margin-right: 10px; /* 可选：添加间距 */
  }
  

• float浮动方案：
  给div设置float: left（或者right），让元素脱离文档流浮动到一侧，从而实现水平排列。记得给父容器清除浮动，避免布局塌陷，最简单的方式是给父容器加overflow: hidden：

  .parent-container {
    overflow: hidden; /* 清除浮动，防止父容器高度塌陷 */
  }
  .horizontal-div {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 10px;
  }
  

• 表格布局方案：
  把父容器设为display: table，子div设为display: table-cell，这种方式不仅能水平排列，还能轻松实现垂直居中，适合需要对齐的场景：

  .parent-container {
    display: table;
    width: 100%; /* 占满父容器宽度 */
  }
  .horizontal-div {
    display: table-cell;
    width: 33.33%; /* 均分宽度，根据需求调整 */
    height: 100px;
  }
  

2. React路由切换卡片动画的布局抖动问题解决 #

你遇到的问题本质是过渡期间新旧卡片同时存在，触发了文档流的换行，flex布局之所以没解决，是因为flex元素在过渡时仍属于文档流，两个元素的宽度计算会互相干扰。下面给你两种可行的解决方案，包括Bootstrap类的实现：

核心方案：绝对定位让卡片脱离文档流 #

让新旧卡片在过渡期间完全重叠在同一位置，这样就不会触发布局流的变化，自然消除抖动：

方法一：自定义CSS实现

1. 给父容器#main设置相对定位，作为卡片绝对定位的基准：

   #main {
     position: relative;
     min-height: 100vh; /* 确保容器高度占满视口，避免卡片高度变化导致抖动 */
     overflow: hidden; /* 防止过渡期间卡片内容溢出出现滚动条 */
   }
   

2. 修改卡片的样式，让所有卡片都定位在父容器的左上角，宽度占满：

   .mainCard {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
   }
   

3. 调整动画时序（之前的transition-delay可能导致新旧卡片间出现间隙，建议移除）：

   .mainCard-enter {
     transform: translateX(100%);
   }
   .mainCard-enter-active {
     transform: translateX(0);
     transition: transform 0.3s ease-in;
   }
   .mainCard-exit {
     transform: translateX(0);
   }
   .mainCard-exit-active {
     transform: translateX(-100%);
     transition: transform 0.3s ease-out;
   }
   

方法二：Bootstrap工具类实现

如果你想用Bootstrap的类来减少自定义CSS，可以这样改：

1. 父容器添加position-relative min-vh-100 overflow-hidden类：

   <div id='main' class="position-relative min-vh-100 overflow-hidden">
     <Route exact path={path} key={title}>
       <CSSTransition classNames='mainCard' nodeRef={refQuery} unmountOnExit >
         <div className='mainCard position-absolute top-0 start-0 w-100' ref={refQuery} >
           <Component />
         </div>
       </CSSTransition>
     </Route>
     <!-- 其他路由 -->
   </div>
   

2. 动画样式保持不变，Bootstrap的工具类已经帮你完成了定位和宽度的设置。

额外注意事项 #

• 确保CSSTransition的nodeRef正确绑定，这在React 18的严格模式下尤为重要，避免出现DOM操作的警告。
• 移除之前给#main设置的display: flex相关样式，因为绝对定位的元素已经脱离了文档流，flex布局不再生效，反而会干扰定位。
• 如果卡片的高度是动态变化的，min-vh-100（或自定义的min-height: 100vh）能确保父容器始终有足够的高度，避免过渡期间页面高度突变。

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