ブロックを最小限必要な幅にするには？

Question

だから、通常は表示を叩くだけです：インラインブロックですが、別の行にブロックが必要です。ブロックはそれを行いますが、親コンテナの可能な限りの幅をとります。代わりに、最小幅を必要とするブロックを取得するにはどうすればよいですか？ブロック要素のための

1）使用float:leftとclear:left：

Answer 1

は、ここでは、これを行うことができます3つの方法です。これの欠点は、前後のコンテンツがブロック内にある必要があることです。

2）要素がinline表示を取得しながら、擬似セレクタ（:after）を使用して改行を強制）display: table

3を使用。

div[class] { 
 
    margin:1em; 
 
    padding-bottom: 1em; 
 
    border-bottom:1px dashed #CCC; 
 
    overflow: auto; 
 
} 
 

 
div > div { 
 
    background:#000; 
 
    color:#FFF; 
 
    padding:1em; 
 
} 
 

 
/* solution 1: float clear */ 
 
.s1 div { 
 
    float:left; 
 
    clear:left; 
 
} 
 

 
/* solution 2: table */ 
 
.s2 div { 
 
    display: table; 
 
} 
 

 
/* solution 3: break line with psuedo element (after) */ 
 
.s3 div { 
 
    display:inline; 
 
    padding:0; 
 
} 
 
.s3 div:after { 
 
    content:"\A"; 
 
    white-space:pre; 
 
}

<div class="s1"> 
 
    <p>Solution 1</p> 
 
    <div>hello</div> 
 
    <div>universe</div> 
 
</div> 
 

 
<div class="s2"> 
 
    <p>Solution 2</p> 
 
    <div>hello</div> 
 
    <div>universe</div> 
 
</div> 
 

 
<div class="s3"> 
 
    <p>Solution 3</p> 
 
    <div>hello</div> 
 
    <div>universe</div> 
 
</div>

jsFiddle：https://jsfiddle.net/azizn/s9zxm2o4/