CSS 动态元素破坏布局

Question

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

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

我发现我可以通过从 pluginBox 中删除 "float:left" 来修复它，但我不能再在这些元素之间放置 space。

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

这是因为您同时漂浮了两个内部容器。

您需要执行以下操作 https://jsfiddle.net/564sde36/:

.containerBox:after,
.containerBox::after {
  clear: both;
  content: "";
  display: table;
}

这实际上是生成容器后的样式，并不意味着您需要任何额外的 html 标记。

Answer 2

将溢出隐藏添加到您的 contanerBox

.containerBox { margin: auto; overflow: hidden; }

Answer 3

这里还有一个关于"clearfix"class的post，通常在容器内有浮动元素时使用：What is a clearfix?

CSS 动态元素破坏布局

CSS on Dynamic Elements breaks Layout

html

javascript

css

jquery

containers