0

在这里（和下面）你可以看到一个“中间” div 不会包装其内容的问题。我试图让它自动包装表格的全部内容，所以一直有一个整洁的白色 10 像素填充边框。我已经尝试了我能想到的一切，玩显示模式、浮动、清除、溢出......但似乎没有任何效果。谁能看到我哪里出错了？

#outer {
    height : 200px;
    width : 200px;
    background : red;
    overflow : auto;
    padding : 10px;
}
#middle {
    background : white;
    padding : 10px;
}
#inner {
    border : 1px solid purple;
}
td {
    background : cyan;
    padding : 5px;
    border : 1px solid blue;
}
<div id="outer">
  <div id="middle">
    <table id="inner">
      <tr>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
      </tr>
    </table>
  </div>
</div>

4

5 回答 5

2

添加

display:inline-block;

到#middle定义。

display: inline 和 display: inline-block 有什么区别？inline-block提供有关属性值的更多详细信息。

看到这个更新的小提琴。

于 2013-01-24T09:00:57.973 回答
1

您可以使用table-layout:fixed。像这样写：

#inner {
            border : 1px solid purple;
            table-layout: fixed;
            width: 100%;
        }

检查这个http://jsfiddle.net/nCe8k/10/

于 2013-01-24T09:04:04.363 回答
0

如果您希望父容器的大小固定且不溢出，则无法解决此问题。表在这方面并不灵活，并且它们具有最小大小，因此默认情况下它会延伸到父容器的边界之外。您需要使父容器更大。

    #outer {
        height : 200px;
        width : 300px;
        background : red;
        overflow : auto;
        padding : 10px;
    }

见这里：http: //jsfiddle.net/tMaCv/

于 2013-01-24T09:01:41.207 回答
0

否则，您需要告诉#inner，它的宽度为#outer 减去填充的值（在您的示例中为20px）。

但是如果你想显示一些东西，你应该考虑让#outer更大，并跟踪's的大小。

于 2013-01-24T09:03:34.030 回答
0

表格的问题在于它们总是试图显示它们的全部内容。4 次相邻的“随机”一词需要超过 200px 的空间。但这不会使父元素调整大小。实际上有4个解决方案：

  1. 使用 js 计算表格的实际宽度
  2. 使用更宽的桌子（如果可能）:-)
  3. 使用溢出：隐藏，这样它至少不会弄乱你的布局
  4. 对外部元素使用宽度的 min-width insetad
于 2013-01-24T09:06:30.547 回答