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

Question

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

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

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

#A {
  width: 200px;
}

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

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

Answer 1

一个简单的解决方法是将 float 转换为 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>

Answer 2

如果您不介意在#B 下多一个包装器并且您真的想使用浮点数，您可以这样做。我把 #A 的那 200px 作为“常量”，因为你在你的例子中使用了它。

.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>

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

How to keep floated div from moving beneath other floated div when the browser width resizes?

html

css

css-float