参考资料

  1. display: flex/inline-flex示例
  2. css中div居中
  3. 有没有推荐的 CSS 过渡动画库？
  4. 如何避免 CSS 过渡动画卡顿？
  5. CSS3 阴影
  6. css div阴影效果,
  7. css3中设置阴影的属性是
  8. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
以下是几种常用的 CSS 横向布局方法，根据不同的需求选择最适合的方式：

方法 1：Flexbox 弹性盒子（推荐）
css
Copy Code
.container {
  display: flex;          /* 启用 Flexbox */
  gap: 20px;             /* 子元素之间的间距 */
  justify-content: start; /* 水平对齐方式 (start/center/space-between) */
  align-items: center;   /* 垂直对齐方式 */
}

.item {
  /* 子元素样式，宽度可自定义 */
  flex-shrink: 0;        /* 禁止子项收缩 */
}


优点‌：简单灵活，支持自动换行（flex-wrap: wrap）和动态调整间距。

方法 2：Grid 网格布局
css
Copy Code
.container {
  display: grid;
  grid-auto-flow: column; /* 横向排列 */
  grid-auto-columns: 1fr; /* 子项等宽 */
  gap: 20px;             /* 间距 */
}


优点‌：适合复杂布局，可精准控制列宽和行高。

方法 3：Inline-Block
css
Copy Code
.container {
  font-size: 0;          /* 消除 HTML 空格间隙 */
}

.item {
  display: inline-block;
  width: 100px;
  vertical-align: top;   /* 顶部对齐 */
  font-size: 16px;       /* 恢复字体大小 */
  margin-right: 20px;    /* 手动添加间距 */
}


注意‌：需手动处理元素间的默认空格间隙。

方法 4：浮动 (Float)
css
Copy Code
.item {
  float: left;          /* 横向排列 */
  width: 100px;
  margin-right: 20px;
}

.container::after {
  content: '';
  display: block;
  clear: both;          /* 清除浮动 */
}


注意‌：较老的技术，需处理高度塌陷问题。

方法 5：水平滚动布局
css
Copy Code
.container {
  white-space: nowrap;  /* 禁止换行 */
  overflow-x: auto;    /* 横向滚动 */
}

.item {
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}


场景‌：适用于需要横向滚动的列表（如移动端导航）。

选择建议：
现代布局首选 Flexbox‌，代码简洁且功能强大。
需要精确控制行列时用 ‌Grid‌。
简单项目或兼容旧浏览器可考虑 ‌inline-block‌ 或 ‌float‌。

如果需要完整案例或进一步优化细节，请告诉我！