浏览器窗口调整时浮动Div按列而非行排列问题求助

嗨，别担心，刚接触Div布局遇到这种问题很正常！我来帮你解决这个浮动元素在窗口缩小时“按列排列”（其实是自动换行导致的多行显示）的问题～

方法1：使用Flexbox布局（最推荐） #

Flexbox是现代CSS布局的首选方案，比浮动更灵活，能轻松控制元素的排列和换行行为。只需要修改外层容器的样式：

<div id="OuterContainer" style="display: flex; flex-wrap: nowrap; overflow-x: auto;">
  <div style="width:200px;">Amy</div>
  <div style="width:200px;">Bob</div>
  <div style="width:200px;">Carl</div>
  <div style="width:200px;">Dan</div>
  <div style="width:200px;">Edith</div>
  <div style="width:200px;">Fran</div>
</div>

• display: flex：将外层容器转换为flex容器，子元素会自动横向排列
• flex-wrap: nowrap：强制所有子元素保持在同一行，不会换行
• overflow-x: auto：当总宽度超过浏览器窗口时，自动显示横向滚动条，方便查看所有内容

如果希望窗口宽度不够时，子元素自动换到下一行（依然是横向排列，而非纵向），只需把flex-wrap: nowrap改成flex-wrap: wrap即可。

方法2：给外层容器设置最小宽度（兼容旧方案） #

如果你想继续使用浮动布局，可以给外层容器设置一个最小宽度，值等于所有子div的总宽度（比如6个200px的子元素，总宽度就是1200px）：

<div id="OuterContainer" style="float:left; width:100%; min-width: 1200px;">
  <div style="width:200px; float:left">Amy</div>
  <div style="width:200px; float:left">Bob</div>
  <div style="width:200px; float:left">Carl</div>
  <div style="width:200px; float:left">Dan</div>
  <div style="width:200px; float:left">Edith</div>
  <div style="width:200px; float:left">Fran</div>
</div>

这种方法的缺点是：如果子元素数量变化，你需要手动修改最小宽度；当窗口宽度小于最小宽度时，页面会出现横向滚动条。

方法3：使用CSS Grid布局（另一种现代方案） #

CSS Grid也是非常强大的布局工具，同样能实现你的需求：

<div id="OuterContainer" style="display: grid; grid-template-columns: repeat(auto-fit, 200px);">
  <div style="width:200px;">Amy</div>
  <div style="width:200px;">Bob</div>
  <div style="width:200px;">Carl</div>
  <div style="width:200px;">Dan</div>
  <div style="width:200px;">Edith</div>
  <div style="width:200px;">Fran</div>
</div>

• grid-template-columns: repeat(auto-fit, 200px)：自动根据窗口宽度排列200px宽的列，当一行放不下时自动换行
• 如果想要强制所有元素保持在一行，可改成grid-template-columns: repeat(6, 200px); overflow-x: auto;

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