Wie wird ein Block benötigt die minimal erforderliche Breite?

Question

Also normalerweise würde ich nur Anzeige klatschen: Inline-Block drauf, aber ich brauche immer noch den Block in einer separaten Zeile zu sein. Block macht das, aber nimmt die größtmögliche Breite seines übergeordneten Containers. Wie bekomme ich einen Block, der stattdessen die erforderliche Mindestbreite verwendet?

Answer 1

Hier gibt es 3 Möglichkeiten, wie Sie dies tun könnte:

1) Verwendung float:left und clear:left für die Blockelemente. Der Nachteil von diesem ist, dass jeder Inhalt vorher oder nachher innerhalb eines Blocks sein muss.

2) Verwenden display: table

3) einen Zeilenumbruch Erzwingen eines Pseudo Selektor (:after), während die Elemente eine inline Anzeige.

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/