2

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

以下是我的代码：

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>

我按照此链接寻求解决方案。但是当动态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>

请帮帮我。

4

1 回答 1

1

我想问题是容器中的 div （在您的示例中为 id="old"）不是彼此相邻，而是在下方。

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

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

并使 childern-divs 内联块元素：

#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>

否则，请提供一个更好的示例/描述问题到底是什么。

于 2013-06-20T09:49:43.700 回答