javascript - HTML 和 CSS ..并排添加 div n 次

Question

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

|静态 Div|内容 Div0|内容 Div1|...|内容 DivN|静态 Div|

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

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

要求:

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

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

1. 在一个点之后，内容 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”来设置它们的样式。此布局中的键是:

1. 使三个部分“ float :左”，#static_div_1、#static_div_2 和#content div(并可选择为它们设置固定宽度)。
2. #content div 上的“overflow-x: scroll”样式。
3. #content div 的“white-space: nowrap”。
4. 为#content div 内的每个元素设置“display: inline-block”。

您会注意到每个元素之间都有一个空格。这是换行符空间，因此为了避免这种情况，这些元素 div 之间不能有换行符或空格。

希望以上结果对您有所帮助。最好的问候。

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

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