Question

我试图用滚动条水平显示动态生成的DIV。可以有n个DIV。原始html结构：

HTML（index.html）

<div style="width:100%;float:left;" id="old">
    <div>
        <h1>First Div</h1>
        <div id="R1">
            <h1>First Div Internal</h1>
            <a id="R1_index" class="close_page" href="javascript:void(0)">Close</a>
        </div>
    </div>
    <div>
        <h1>Second Div</h1>
        <div id="R2">
            <h1>Second Div Internal</h1>
            <a id="R2_index" class="close_page" href="javascript:void(0)">Close</a>
        </div>
    </div>
</div>

我按照此link寻求解决方案。但是当动态DIV加载结构看起来搞砸了。它看起来像：

HTML（index.html）

<div style="width:100%;float:left;" id="old">
    <div id="items">Missing Internal Content</div>
    <div id="items">Missing Internal Content</div>
</div>

请帮帮我们。

Answer 1

我想问题是容器中的div（在你的例子中id =“old”）不是彼此相邻，而是在下面。

如果这是您的问题，请将以下样式添加到容器中：

#old {
    overflow: auto;
    white-space: nowrap;
}

并制作childern-divs内联块元素：

#old > div {
    display: inline-block;
}

然后它应该按预期工作。看到工作解决方案：

FIDDLE Example 的

否则请提供更好的示例/描述问题的确切原因。

使用滚动条在容器内水平显示生成的div

1 个答案: