7

div の CSS プロパティ table-cell を設定しました。また、div の幅を指定し、オーバーフローを非表示に設定しましたが、table-cell プロパティにより、div は幅を気にしません。大きな画像を配置すると幅からはみ出してしまいます。table-cell を使用して div に固定幅を使用するにはどうすればよいですか?

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}
4

2 に答える 2

9

奇妙なことに、この JSFiddleは私にとってはうまくいくようです。

どのブラウザで問題が発生していますか?

また、テーブル セルの最大幅を強制するには、max-widthプロパティを使用します。こちらで確認できます。コードは以下のとおりです。

HTML:

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>​

CSS:

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}​
于 2012-10-24T10:59:53.980 に答える
5

display: table-cellテーブルのサイズ変更規則に従います。コンテンツが大きすぎる場合は、収まるように拡大されます。

本当に使用する必要がありますdisplay: table-cellか? それを機能させるには、別の div でラップし、幅を 400 にして設定する必要がありますoverflow: hiddenが、それは逆効果のようです。

于 2012-10-24T10:56:09.013 に答える