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

Question

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

我应该在页面中的表“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 View 的代码(它包含我用来动态创建列表的逻辑，那部分不应该是问题所在)

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