オーバーフロー設定後、画面外の部分が表示できない問題が発生しました: div_html/css

オーバーフロー設定後、画面外の部分が表示できない問題が発生しました: div_html/css_WEB-ITnose に隠れています

WBOY

リリース： 2016-06-21 09:33:17

オリジナル

1917 人が閲覧しました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">	.out {		overflow:hidden;	}	.inner {		width:100%;	}</style></head><body><div class="out">	<table class="inner">    	<tr>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        	<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>        </tr>    </table></div></body></html>

ログイン後にコピー

これは簡単なデモです
聞いてください。 div に overflow:hidden を設定すると、画面外の部分が表示されなくなるのはなぜですか。
この問題はie6以外のブラウザでも発生します。

私のオーバーフロー: 非表示は必須です。解決してください。

ディスカッションへの返信 (解決策)

.out {

width:100%;

.out {
width: 100%;オーバーフロー:非表示

}

いいえ申し訳ありませんが、width: 100% を追加しましたが、それでも効果はありません。 .outに固定幅を追加して幅をinnerと等しくすれば解決しますが、.outを使っているページが多くなるのでこれは望ましくありません

元々そうなんです
divを設定するのですねオーバーフローする: 非表示。内部のオーバーフロー要素は絶対に表示されません

この .inner td{float:left;} を追加してみてください

混乱しています、間違った理解でした。

3階にあるものをお試しください。

本来はこうです
div を overflow:hidden に設定します。内層のオーバーフロー要素は絶対に表示されません

この .inner td{float:left;} を追加してみてください

これはうまくいかないと思います。 tdはフローティングできないようですよね？

td はフローティングできますが、そのフローティングはすべてのブラウザーでサポートされているわけではありません。

IE6 および 7 は td フローティングをサポートしていません。

要件に従って:

1 つの方法は、overflow:hidden; を削除することです

1 つの方法は、.out の固定幅を設定することですが、完全な表示を許可するために overflow:hidden; の幅を設定することはあまり意味がありません。

あなたのニーズは合理的なニーズではありません。

overflow:hidden; 最初に理解してください

要件に従って:

1 つの方法は、overflow:hidden; を削除することです

1 つの方法は、.out を固定幅に設定することですが、overflow:hidden を完全に表示できる幅を設定することです; そしてそれがどれほど意味があるのかはありません。