javascript - 动态元素上的 CSS 破坏了布局

Question

目前我有 2 个并排放置的子容器元素。一是左侧导航菜单，二是右侧内容展示区。这些在 Document.Ready() 函数中填充，但是这样做会导致页面布局中断，因为这些后面的容器不会展开。

我已经尝试设置各种显示元素，如“ block ”、“内联”等，只是为了看看它是否能解决问题，但到目前为止我没有任何运气。任何人都可以提供有关这种情况下可能出现的问题的见解吗？

我发现我可以通过从 pluginBox 中删除“float:left”来修复它，但我无法再在这些元素之间放置空格。

CSS:

.containerBox {
    margin: auto;
}
.catBox {
    float: left;
    height: 750px;
    width: 20%;
    overflow: auto;
    margin: 0;
    border: solid black 1px;
}
.pluginBox {
    float: left;
    margin-left: 25px;
    height: 750px;
    width: 75%;
    overflow: auto;
    border: solid black 1px;
}

HTML:

<div id="containerBox" class="containerBox">
    <div id="catBox" class="catBox">
        <ul id="categories" class="cat_menu"></ul>
    </div>
    <div id="pluginBox" class="pluginBox">
        <table id="pluginTable" class="plugin_table">
        </table>
    </div>
</div>

Answer 1

将隐藏的溢出添加到您的 contanerBox

.containerBox{ margin :自动； 溢出:隐藏； }