html - 在带有滚动条的容器内水平显示、生成 div

Question

我正在尝试使用滚动条水平显示动态生成的 div。可以有 n 个 div。

下面是我的代码:

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 内联 block 元素:

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

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

* {
    padding: 0;
    margin:0;
}

#container {
    width: 300px;
    height: 100px;
    overflow: auto;
    white-space: nowrap;
}
.element {
    display: inline-block;
}
.box {
    width: 100px;
    height: 100px;
    background: lightgrey;
}

<div id="container">
    <div class="element">
        <div class="box">
            <h1>1</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>2</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>3</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>4</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>5</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>6</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>7</h1>
        </div>
    </div>
    <div class="element">
        <div class="box">
            <h1>8</h1>
        </div>
    </div>
</div>

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