DIVにコンテンツの幅を与える方法は？

Question

私はその内容の中で絵の幅をDIVにしたいと思います。ここで

は私のHTMLです：ここでは

<div id="container"> 
    <div id="picandtext"> 
     <img src="https://placehold.it/480x320" /> 
     <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p> 
    </div> 
</div> 

は私のCSSです：

#container { height: 600px; display:table; width:1%; background: red; padding:10px; } 
#picandtext { height: 400px; display:table; width:1%; background: green; padding:10px; } 
#picandtext img { height: 180px; } 
#picandtext p { height: 180px; } 

あなたはこのJSFiddle例で見ることができるように私は最終的にdisplay:table; width:1%;でそれを行う方法を見つけました：https://jsfiddle.net/Ls750c64/2/

しかし、私はこの方法がそれを作るのに最高のものかどうか知りたいですか？

Answer 1

既存のマークアップを指定すると、#containerdisplay: inline-block;となり、テキストはpに完全に配置されます。

#container { 
 
    height: 600px; 
 
    display: inline-block; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 

 
#picandtext { 
 
    height: 400px; 
 
    background: green; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
#picandtext img { 
 
    height: 180px; 
 
} 
 

 
#picandtext p { 
 
    position: absolute; 
 
    left: 10px; 
 
    right: 10px; 
 
}

<div id="container"> 
 
    <div id="picandtext"> 
 
     <img src="https://placehold.it/480x320" /> 
 
     <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p> 
 
    </div> 
 
</div>

及び固有のサイジングを使用することになり、それを行うにはあまりサポートされている方法。それのためのブラウザのサポートは、しかし、吸う。 http://caniuse.com/#feat=intrinsic-width

#container { 
 
    height: 600px; 
 
    display: inline-block; 
 
    background: red; 
 
    padding: 10px; 
 
    width: min-content; 
 
} 
 

 
#picandtext { 
 
    height: 400px; 
 
    background: green; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
#picandtext img { 
 
    height: 180px; 
 
}

<div id="container"> 
 
    <div id="picandtext"> 
 
     <img src="https://placehold.it/480x320" /> 
 
     <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p> 
 
    </div> 
 
</div>