Question

我需要使用以下布局构建HTML / CSS布局

我的代码的缩小版本如下：

<div id="container">
  <div id="static_div_1"></div>
    <div id="content">
      <div id="item1"></div>
      <div id="item2"></div>
       ....
      <div id="itemN"></div>
    </div>
  <div id="static_div_2"></div>
</div>

要求：

所有DIV都需要堆叠在旁边彼此。
我需要使用javascript
静态DIV需要在内容的开头和结尾保持其位置。
内容DIV应滚动水平

我正在努力解决以下问题：

在一个点之后，内容div开始包装插入的DIV，并开始渲染另一行DIV。

编辑：它本质上不像普通数据那样表格。假设每个div本身就像一个形式。看起来像W2的东西。我只需要滚动内容DIV。为了使事情变得更糟，我不是一个真正的GUI人.. :(

任何帮助将不胜感激。

Answer 1

您需要的CSS代码是：

#static_div_1, #static_div_2 {
    float: left;
    width: 200px;
  }
  #content {
    float: left;
    overflow-x: scroll;
    white-space: nowrap;
    width: 600px;
  }
  #content .item {
    display: inline-block;
    *display: inline;  /* Target IE6/7 only */
    width: 150px;
    zoom: 1;
  }

注意我已经为#content div中的每个项添加了一个“item”类来设置它们的样式。此布局中的键是：

将“float：left”设为三个部分，＃static_div_1，＃static_div_2和#content divs（并可选择为它们设置固定宽度）。
#content div。上的“overflow-x：scroll”样式。
“white-space：nowrap”到#content div。
将“display：inline-block”设置为#content div。

您会注意到每个项目之间有空格。这是换行符空格，因此要避免它，这些项目div之间必须没有换行符或空格。

我希望这些结果对您有所帮助。最好的问候。

更新：它现在适用于IE6 / 7。要在这些浏览器上正确设置“display：inline-block”，请注意添加以下行：

...
#content .item {
    ...
    *display: inline;  /* Target IE6/7 only */
    ...
    zoom: 1;
  }

HTML和CSS..adding并排n次

1 个答案: