16

重複の可能性:
CSS Div の幅をコンテンツと等しくする

私はチャットのようなアプリケーションを作ろうとしていますが、今、ある種の小さなバグに遭遇しました。

max-width が 350px に設定された div があります。しかし、次のテキストを入れると:

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

すべてのスペースに新しい行が追加されますが、div の幅は 100px のままです。ここで jsFiddle で小さな例を作成しました。

http://jsfiddle.net/5t2hm/12/

ご覧のとおり、黄色のボックスの幅は 100px ですが、テキストの幅に合わせて縮小したいと考えています。要素を使用して修正しようとしましたが、黄色のボックスは同じままです。

基本的に、最大幅の部分を維持しながら、3 番目のボックスのように見せたいと考えています。

黄色のボックスがテキストの幅に縮小する方法を誰かが知っていますか?

4

3 に答える 3

2

このfiddle1またはfiddle2を確認してください。

one を使用する代わりに、divtwo div(または)
onedivと oneを使用しspanます。これがあなたの望むものだと思います。

于 2012-10-01T12:10:45.657 に答える
1

DIV のデフォルトの幅は 100% であるため、max-width はフィドルでそれを制限しているだけです。コンテンツの幅は考慮されません。

DIV を必要なコンテンツに縮小するには、display: inline-block;またはfloat:left; width:auto;.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

于 2012-10-01T12:09:40.170 に答える
1

パラを使う

<p></P>

デモ:フィドル

于 2012-10-01T12:01:02.780 に答える