div内に段落があり、その内容に合わせて拡張されませんが、最長の単語までしか拡張されません。含まれているdivまたは段落の幅を設定していないので、なぜこのように動作するのかわかりませんか?
問題のサイトはhttp://bit.ly/JV5I0Zマウスを緑色の四角の上に置いたものです
なぜこれが起こるのか分かりますか?
div内に段落があり、その内容に合わせて拡張されませんが、最長の単語までしか拡張されません。含まれているdivまたは段落の幅を設定していないので、なぜこのように動作するのかわかりませんか?
問題のサイトはhttp://bit.ly/JV5I0Zマウスを緑色の四角の上に置いたものです
なぜこれが起こるのか分かりますか?
使ってみてください
whitespace: nowrap;
それらの<p>
要素について。
あなたの包含<div>
とあなたの両方<p>
がに設定されていposition: absolute
ます。どちらにも幅が設定されていない場合、これは、コンテンツを考慮して両方をできるだけ狭くする必要があることを意味すると思います。これが、あなたが見ている動作です。(仕様の関連セクションは10.3.7ですが、完全に理解しているかどうかはわかりません。)
(代わりに、静的に配置した場合の幅、つまりコンテナーの幅の 100% を維持することもできます。絶対に配置する場合は、コンテンツの一部がオフに配置される可能性が高くなります。画面。)
を設定する場合position: absolute
、通常は幅も設定する必要があります。に値を設定した場合は、幅を固定する代わりに にもleft
値を設定してみてください。right
(古いバージョンの IE では問題が発生する可能性があります。)