设置float:left的div未手动指定body宽度时无法并排显示问题求助

直接替换原有代码即可，无需手动指定body宽度即可实现5个div自动横向并排：

<!DOCTYPE html>
<html>
<style>
body {
  display: flex;
  overflow-x: auto;
  margin: 0;
}

div {
  padding-left: 800px;
  padding-right: 800px;
  text-align: center;
  border: 1px solid red;
}
</style>
<body>
  <div>Div 1<br>line 2</div>
  <div>Div 2<br>line 2</div>
  <div>Div 3<br>line 2</div>
  <div>Div 4<br>line 2</div>
  <div>Div 5<br>line 2</div>
</body>
</html>

你之前用float布局遇到的换行问题是float的固有规则：父容器宽度不足以容纳所有浮动子元素时，超出的元素会自动换行，必须手动计算父容器总宽度才能避免。改用Flex布局后，默认子元素不会自动换行，会自动横向排列，不需要手动设置父容器宽度。
如果必须保留float类似的效果，也可以用inline-block方案实现：

<!DOCTYPE html>
<html>
<style>
body {
  white-space: nowrap;
  margin: 0;
}

div {
  padding-left: 800px;
  padding-right: 800px;
  text-align: center;
  border: 1px solid red;
  display: inline-block;
}
</style>
<body>
  <div>Div 1<br>line 2</div>
  <div>Div 2<br>line 2</div>
  <div>Div 3<br>line 2</div>
  <div>Div 4<br>line 2</div>
  <div>Div 5<br>line 2</div>
</body>
</html>

Flex布局是当前主流的布局方案，适配性和灵活性都更高，更推荐使用。

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