css - 当孩子长大时如何使html div扩展？

Question

我有一个包含表格的主 div：

<div id="main_container"><table>

你可以看到完整的代码：http: //jsfiddle.net/tF62u/

如您所见，子表比 div 宽，但它（div）没有相应调整。

我在这里缺少哪个定义？

score 5 · Accepted Answer

添加display:inline-block到您的 div 的 CSS 规则：

#main_container {
    font-size: 9px;
    border: solid 3px #faa;
    background-color: rgba(245, 255, 10, 0.12);
    display: inline-block;
}

score 0 · Accepted Answer

0

添加display:table;到您的#main_container

于 2013-08-20T15:24:14.807 回答

score 0 · Accepted Answer

只要让你#main_container有display一个table-cell：

#main_container {
    display: table-cell;
}

score 0 · Accepted Answer

一种可能性是让 div 向左浮动。浮动元素与其内容一样宽，而不是与窗口一样宽。

#main_container {
    font-size: 9px;
    border: solid 3px gray;
    background-color: rgba(245, 255, 10, 0.12);
    float:left;
}

之后还要确保clear浮动，否则如果窗口比表格宽，则后面的其他内容将显示在 div 的右侧。
顺便说一句，这也适用于display:inline-block; 如果你这样做，你需要确保 div 后面跟着一个块元素。

对于这个特殊的小提琴，另一种解决方案是完全删除 div 并将所有样式应用于表格。当然，这只有在表格是 div 的所有内容时才有效......

4 回答 4