当浏览器宽度调整大小时，如何防止浮动div在其他浮动div下方移动? [英] How to keep floated div from moving beneath other floated div when the browser width resizes?

问题描述

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

I'm having a problem where a floated div moves beneath another floated div when the browser width resizes. I created an example of this behavior in a jsfiddle (below) in which I use dummy text and a dummy table. If you open the jsfiddle, and resize the width of the display area, you'll see that eventually the right hand div (the table) moves beneath the left hand div (the text).

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

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

#A {
  width: 200px;
}

理想情况下，我希望看到的是当浏览器宽度调整大小时，右div显示水平滚动条，并使它保持在右侧，而不是在左div下方移动.我尝试将div上的"overflow-x:auto"设置为无效.如何使水平滚动条出现在右侧的表格中，而不是使其移动到左侧的文本下方?

Ideally what I would like to see happen is for the right hand div to display a horizontal scrollbar when the browser width resizes, and for it to stay on the right hand side instead of moving beneath the left hand div. I tried setting "overflow-x: auto" on the div to no avail. How can I make a horizontal scrollbar appear in the table on the right instead of having it move beneath the text on the left?

我对此问题进行了研究，发现了此线程以及

I researched Stack Overflow for this problem and found this thread as well as this thread. The only solution I could glean is that float itself is a problem, and it's hard to get this desired behavior when divs are floated. Is there a way for me to get my desired result while keeping the float layout? Or is float itself the culprit?

推荐答案

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

A simple fix is to convert float to inline-block and use 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>

这篇关于当浏览器宽度调整大小时，如何防止浮动div在其他浮动div下方移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！