当浏览器宽度调整大小时，如何防止浮动 div 在其他浮动 div 下方移动？答案

【问题标题】：How to keep floated div from moving beneath other floated div when the browser width resizes?当浏览器宽度调整大小时，如何防止浮动 div 在其他浮动 div 下方移动？
【发布时间】：2018-09-14 04:01:41
【问题描述】：

当浏览器宽度调整大小时，我遇到了一个浮动 div 移动到另一个浮动 div 下方的问题。我在 jsfiddle（如下）中创建了一个这种行为的示例，其中我使用了虚拟文本和虚拟表。如果您打开 jsfiddle，并调整显示区域的宽度，您会看到最终右侧 div（表格）移动到左侧 div（文本）下方。

https://jsfiddle.net/p7yr5t4u/23/

.view {
  float: left;
  position: relative;
  height: 100%; 
}

#A {
  width: 200px;
}

理想情况下，我希望看到右侧 div 在浏览器宽度调整大小时显示水平滚动条，并使其保持在右侧而不是在左侧 div 下方移动。我尝试在 div 上设置“overflow-x：auto”无济于事。如何使水平滚动条出现在右侧的表格中，而不是让它移动到左侧的文本下方？

我针对这个问题研究了 Stack Overflow，发现 this thread 和 this thread。我能收集到的唯一解决方案是浮动本身就是一个问题，当 div 浮动时很难获得这种期望的行为。有没有办法让我在保持浮动布局的同时获得我想要的结果？还是浮动本身就是罪魁祸首？

【问题讨论】：

是的，浮动本身就是罪魁祸首..删除浮动会很容易
@TemaniAfif 有没有办法在保持浮动的同时做到这一点？
我不这么认为..顺便说一句，为什么需要浮动？这是真正的问题
@TemaniAfif 作为后续问题，您认为使用 float 是不好的风格吗？是否应该尽可能避免？
我会避免使用 bad 这个词。 Float 用于浮动元素，因此取决于您的情况。如果您使用浮动来创建布局，您可能做错了，您需要考虑更好的方法（flexbox、网格、内联块等），但在某些情况下您需要浮动行为，因此您必须使用它...这就是为什么我要问您是否真的需要浮动...在这种特殊情况下，我认为不需要浮动，因为您想要的是并排放置两个块，这是一个完美的用例内联块元素。

标签： html css css-float

【解决方案1】：

一个简单的解决方法是将浮点数转换为inline-block 并使用white-space:nowrap：

.container {
 white-space:nowrap;
}
.view {
  white-space:normal;
  display: inline-block;
  vertical-align:top;
  position: relative;
  height: 100%;
}

#A {
  width: 200px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<div class="container">

  <div id="A" class="view">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div id="B" class="view">
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </div>

</div>

【讨论】：

看起来这个解决方案可能奏效了！一个问题：为什么我们需要设置 white-space 属性（在容器和视图中）？
@ktm5124 因为继承...你应该把内部容器中的空白恢复正常，删除它，你会看到 bad 效果
感谢您的帮助！在接受之前我会稍等片刻，但您的解决方案似乎有效。

【解决方案2】：

如果您不介意在#B 下添加一个额外的包装器并且您真的想使用浮点数，您可以这样做。自从您在示例中使用它以来，我将 #A 的那 200 像素作为“常数”。

.view {
  float: left;
  position: relative;
  height: 100%;
}

#A {
  width: 200px;
}

#B {
  box-sizing: border-box;
  margin-left: -200px;
  padding-left: 200px;
  width: 100%;
}
#C {
  overflow-x: auto;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<div>

<div id="A" class="view">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="B" class="view">
<div id="C">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
<div>
</div>
</div>

</div>

【讨论】：

但是这里的表格会缩小，我们不会滚动
是的，它会缩小到不能再缩小的程度，这就是滚动开始的时候。