Question

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

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

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

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

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

Answer 1

根据我的理解，你可能想要这个：

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

Answer 2

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

See example

Answer 3

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

有意义吗？

Answer 4

您可以尝试阅读此主题，此处回答了另一个类似的问题dynamic width div

Answer 5

另一种选择是给每个div一个类然后使用javasript来计算当前类的数量乘以每个div所需的宽度然后使用javascript来设置页面宽度与on document ready事件。< / p>

Answer 6

我不是百分之百确定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/

无论如何在CSS中使页面宽度变量？

6 个答案: