web-dev-qa-db-ja.com

DIVの幅をコンテンツに合わせて調整する方法

スタイルが添付されたdiv要素があります：

.mypost {
    border: 1px solid Peru;
    font-family: arial;
    margin: auto;
    min-width: 700px;
    width: 700px;
}

私はWordPress DIVブロック内のコンテンツを投稿しますが、簡単にするために<img> DIV内。 divの幅を700ピクセル以上にし、画像が700ピクセルを超える場合は幅を調整します。

それを達成するための私のオプションは何ですか？ご意見をお聞かせください。

[〜＃〜] update [〜＃〜]

参照してくださいFiddle http://jsfiddle.net/cpt_comic/4qjXv/

htmlcsslayout
37
Captain Comic

これを達成する1つの方法は、divにdisplay: inline-block;を設定することです。デフォルトではblock要素であり、（もちろんwidthを指定しない限り）埋めることができる幅を常に埋めます。

inline-blockの唯一の欠点は、IEがバージョン8からのみ正しくサポートすることです。IE 6-7では、自然にinline要素にのみ設定できますが、 この問題を解決するためのハッキング 。

他にもオプションがあります。float it、またはposition: absoluteを設定できますが、これらはレイアウトに他の効果もありますので、どちらがあなたの状況により適しているかを決める必要があります。

77
kapa

float:left;またはdisplay:inline-block;を使用してみてください。

これらは両方とも、要素の動作をデフォルトの100％幅からコンテンツの自然な幅のデフォルトに変更します。

ただし、どちらも周囲の要素のレイアウトにも影響することに注意してください。ただし、inline-blockはあまり影響を与えないことをお勧めします。したがって、おそらく最初に試してみることをお勧めします。

16
Spudley

このかなり新しいソリューションを他の回答に追加したいと思います。

要素をインラインブロックにしたくない場合は、次の操作を実行できます。

.parent{
  width: min-content;
}

サポートは急速に増加しているため、Edgeがそれを実装することに決めたとき、それは本当に素晴らしいものになります。 http://caniuse.com/#search=intrinsic

15
Vandervals

EDIT2-はい、自動でDOM SOZを埋めます！

#img_box{        
    width:90%;
    height:90%;
    min-width: 400px;
    min-height: 400px;
}

このフィドルをチェックしてください

http://jsfiddle.net/ppumkin/4qjXv/2/

http://jsfiddle.net/ppumkin/4qjXv/3/

このページ

http://www.webmasterworld.com/css/3828593.htm

元の回答が間違っていたため削除しました。

幅は問題ありませんが、高さは0にリセットされます

そう

 min-height: 400px;
1
Piotr Kula