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 に答える