0

我有一个没有垂直滚动的页面，而是水平显示所有内容。

如果您一直滚动到我的页面末尾（一直到右侧），您将看到我的联系信息。例如：

<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>

在这种情况下， div1 是最左边的项目，div2 在中间 div3 在它的右边......一直到最后，显示 divN。每个 div 的宽度为 500 像素。我可以将我的页面宽度设置为 20000 像素（对于 4 个 div），效果很好。但是，我想让我的页面动态，并且除 divN 之外的每个 div 都是从数据库加载的。这意味着，每次添加内容时，我都必须手动增加页面宽度。

有没有办法自动化这个过程。

4

5 回答 5

3

据我了解，这可能是您想要的：

.parent{
    overflow:hidden;
    white-space:nowrap;
}

.parent > div{
    width:500px;
    height:300px;
    border:1px solid red;
    display:inline-block;
    *display:inline;/*For IE7*/
    *zoom:1;
    white-space:normal;
}

检查这个http://jsfiddle.net/HJsrJ/

于 2012-06-22T07:18:34.877 回答
1

为什么不使用width:100%外部 div 并让其他 divwidth:33%的每个内容都以正确的方式浮动？

查看示例

于 2012-06-22T07:19:51.393 回答
0

您可以将 CSS 保存到表格中，在要动态更改值的位置插入占位符。哎呀，这甚至可能只是某个地方的模板文件。然后，每当您在基础上发布新部分时，拉出模板，用字符串替换占位符，然后将新的 CSS 写入文件。

有道理？

于 2012-06-22T07:16:28.510 回答
0

另一种选择是给这些 div 中的每一个一个类，然后使用 javasript 来计算存在的类的数量，然后将其乘以每个 div 的所需宽度，然后使用 javascript 通过 on document ready 事件设置页面宽度。

于 2012-06-22T07:22:52.937 回答
0

我不是 100% 确定 OP 在这里想要什么，但这里有一个“解决方案”：

HTML：

<div class="parent">
    <div id="div1">1 has content</div>
    <div id="div2" class="nocontent"><!-- no content --></div>
    <div id="div3">3 has content</div>
    <div id="div4">4 has content</div>
    <div id="div5" class="nocontent"><!-- no content --></div>
    <div id="div6" class="nocontent"><!-- no content --></div>
</div>​

CSS：

.parent {
    white-space: nowrap;
}

.parent > div {
    display: inline-block;
    width: 200px;
    margin-left: 1px;
    background: #eee;
}

.parent > .nocontent {
    display: none;            
}
​

JavaScript (jQuery):

$(function() {
   // Simulate loading content
    setTimeout(function() {
        $('#div2').text('2 has content now').removeClass('nocontent');
    }, 3000);
});​

演示：

http://jsfiddle.net/foxbunny/EY9sc/

于 2012-06-22T08:39:58.233 回答