0

我似乎无法将我的（动态宽度）表与前一个元素保持在同一行，并让它扩展到它的父容器而不超出它并溢出。我不想要水平滚动条，因为表格应该只是打破线条和/或单词以使其更窄。但是，它没有这样做。

jsfiddle

在小提琴中，表格溢出并超出其父容器的宽度。父容器white-space: nowrap用于将其与旁边的内容保持在同一行。

为什么它的宽度大小不正确？如果我在桌子上设置了固定宽度，它可以正常工作并正确调整宽度，但我需要表格的宽度是动态的。只有最外层的 div 是固定的。

有任何想法吗？

4

1 回答 1

1

如果你添加

.listInfoTbl {
[...]
    max-width: 142px;
[...]
}

然后你会看到一切正常。但你可能想知道为什么会这样？

答案是你为你的 div.listPropertyDiv 设置了一定的宽度，因此它不会超过这个宽度，另外还有一些填充要带入公式：

innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore: 
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px

如果您考虑动态更改内容的宽度，您应该过度考虑在#left 上有一个固定的宽度，因为如果父级不缩小它的子级不能。

一个固定的小提琴 但也许这就是您正在寻找具有最大宽度和百分比的解决方案，以便对象可以相应地缩小。

于 2013-08-10T08:02:37.173 回答