Question

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

Demo

我认为在页面右侧有很多空间“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>

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

1 个答案: