Bir blok nasıl en az gerekli genişliği alır?

Question

Genelde sadece ekrana tokat atmak istiyorum: satır içi satır üzerinde ama yine de ayrı bir satırda olmak için bloğa ihtiyacım var. Blok bunu yapar, ancak ana kabının en olası genişliğini alır. Bunun yerine gerekli minimum genişliği alan bir bloğu nasıl alabilirim? blok elemanları

1) Kullanım float:left ve clear:left:

Answer 1

Burada bu yapabileceğini 3 yolu vardır. Bunun bir dezavantajı, herhangi bir içeriğin bir bloğun içinde olması gerektiğinden önce ya da sonra olmasıdır.

2) elemanları inline görüntü elde ederken display: table

3) bir psödo seçici (:after) kullanılarak bir satır sonu zorla kullanın.

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/