Question

我有一个简单的HTML页面，其中包含3个“列”（300px x 100％），它们都有一个垂直滚动条。当具有至少900像素宽度的窗口时，这可以正常工作。但是，当我将窗口的大小调整为小于列的大小时，一个（或多个）列会向下跳跃以垂直适合窗口。这不是我想要的，因为它需要用户在能够看到另一列之前一直向下滚动。

我想要的是非常简单：一种强制浏览器水平适合列的方法，即使它不适合。身体上的width: 900px;不是我想要使用的解决方案，因为列数（及其宽度）是可变的。

换句话说：如何强制浏览器将我的元素水平放置在页面上并停止移动元素？

[编辑] 我当前的代码（嗯，这不是实际的代码，但确实显示了问题所在）：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body, html {
                height: 100%;
            }

            body {
                overflow-x: scroll;
            }

            .column {
                width: 300px;
                height: 100%;
                float: left;
                overflow-x: hidden;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </body>
</html>

Answer 1

三个“列”需要放在一个容器中，容器的CSS设置为'nowrap'

<div style='white-space: nowrap;'>
  <div id='col1'></div>
  <div id='col2'></div>
  <div id='col3'></div>
</div>

Answer 2

<!DOCTYPE html>
<html>
  <head>
    <style>
      * { margin: 0px; padding: 0px; }

      body, html { height: 100%; }

      body { 
        overflow-x: scroll; 
        white-space: nowrap; // prevent 'text' from wrapping
      }

      .column {
        display:inline-block; // make them behave like 'text'
        width: 300px; height: 100%;

        overflow-x: hidden; overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </body>
</html>

Answer 3

AFAIK没有跨浏览器方式强制语义列（没有JavaScript）。

here是我对类似问题的回答。

HTML：

<div class="parent">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</div>

CSS

.parent
{
  display: table-row;
}

.child
{
  display: table-cell;
  width: 300px;
}

我相信IE＆lt; 9有这个问题，所以你需要用JS for IE手动设置大小和位置。

可变的车身宽度

3 个答案: