如何让两个带有滚动条的元素彼此相邻？

Question

我目前正在编写一个视图，其中包含两个可以在彼此之间移动信息的列表元素。这是它目前的外观图片：

据推测，我在页面“CodigoAGrupador”表的右侧有很多空间来容纳“Catalogos”表，它曾经这样做，但是当我添加滚动条时，突然，它们可以只能垂直在一起，永远不要水平。

这是 CSS 代码：

#products {
        float: left;
        width: 500px;
    }

    #cart {
        width: 400px;
        right: 0px;
        top: 0px;
        float: right;
        max-height: 600px;
        overflow-y:auto;
        margin: 2px,2px,2px,2px;
        overflow-x: auto;
    }
    #ListaCodigos{
        max-height:600px;
        width:500px;
        overflow-y:auto;
        margin: 2px,2px,2px,2px;
        overflow-x: auto;
    }

这是我用于 html 视图的代码（它包含我用来动态创建列表的逻辑，这部分不应该是问题）

<div id="content">
    <div id="ListaCodigos">
        <h2 class="ui-widget-header">CodigoAgrupador</h2>
        <div id="products">
            <div id="catalog">
                @foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
                {
                    if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
                    {
                        <h3><a href="#">@c.CodigoAgrupador  -  @c.NombreCuenta</a></h3>
                        <div>
                            <div class="subcatalog">
                                @foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
                                {
                                    if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
                                    {
                                        <h4><a href="#">@c2.CodigoAgrupador  -  @c2.NombreCuenta</a></h4>
                                        <div>
                                            <div class="SpecificCatalog">
                                                <ol>
                                                    <li class="placeholder">Add your items here</li>
                                                </ol>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                            <div class="GeneralCatalog">
                                <ol>
                                    <li class="placeholder">Add your items here</li>
                                </ol>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
    <div id="cart">
        <h2 class="ui-widget-header">Catalogos</h2>
        <div class="ui-widget-content">
            @foreach (LedgerChartOfAccounts c in Model.Catalogos)
            {
                if (c.CodigoAgrupador == null)
                {
                    <ul>
                        <li class="draggable">@c.GLAccountNumber  - @c.GLAccountName  </li>
                    </ul>
                }
            }
        </div>
    </div>
    <div>
        <footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
    </div>
</div>

这可能是一个非常简单的问题，但我找不到任何具体的答案来解决我的问题，而且我已经挣扎了很长时间。欢迎任何帮助。

Answer 1

您只需 float:left menu 和 ListaCodigos 即可将其拉起。确保content 足够宽，可以将它们放在一条线上。

但是，在menu div 之后，您需要添加一个<div style="clear:both"></div>