Question

我正在创建一个横向网页，我正在尝试根据其中的内容动态扩展主体。

我在这里建立网站：http://www.obliquo.co.uk/

正如你所看到的一切正常，但我不得不设置像素值的巨大体宽。页面上的内容将一直在变化。如果我没有设置宽度（以像素为单位），div会自然地垂直开始碰撞。

Answer 1

我没有花时间完全理解您的HTML，但假设以下结构：

<div id="container">
    <section>...</section>
    <section>...</section>
    <article>...</article>
    <article>...</article>
    <section>...</section>
    <section>...</section>
</div>

使用以下CSS：

#container {
    white-space: nowrap;
}
section, article {
    display: inline-block;
    white-space: normal;
    /* no float */
}

这将允许每个部分/文章作为内联元素流动（即，换行）。但white-space: nowrap声明会阻止包装并将其保持在同一行。

Answer 2

您最好的选择是使用JS计算屏幕每次更改时的宽度，然后再使用JS将该值应用于body的width属性。

Answer 3

由于您已经在使用jquery，您可以执行以下操作..我在IE8中尝试过它可以正常工作。您可能需要为其他浏览器稍微调整一下。

在您的脚本中添加脚本标记，如果您计划将LINKS作为页面的最后一部分，这应该可以解决问题。如果你改变它，你可能需要玩arround以使其更具动态性，但这是我遵循的基本原则。

<script type="text/javascript">
            $(document).ready(function()
            {
                var width = $("#links").width() + $("#links").position().left;
                $("body").css("width", width + "px");
            });
</script>

动态HTML正文宽度（超过100％）

3 个答案: