¿Limpiando bloques en línea?

Question

He

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 

Entonces

<div class="centered-holder">misc content 1</div> 
<div class="centered-holder">misc content 2</div> 
<div class="centered-holder">misc content 3</div> 

Yo sólo quiero uno máximo por línea, es esto realmente posible de alguna manera? Es una aplicación iPhone HTML5, por lo que las restricciones más antiguas del navegador no son un problema.

Answer 1

Dependen de sus declaraciones CSS y su margen de beneficio, pero se puede tratar de poner esta declaración CSS en el contenedor principal:

white-space: pre-line; 

Con este enfoque a evitar transformar el .centered-holder a un elemento de bloque, y usted todavía se puede usar, por ejemplo, el text-align:center en el contenedor primario.

---

pre-línea de - Este valor hará que las secuencias de espacios en blanco para colapsar en un solo carácter de espacio. Los saltos de línea ocurrirán donde sea necesario para llenar recuadros de línea, y en líneas nuevas en el marcado (o en apariciones de "\ a" en el contenido generado). En otras palabras, es como normal, excepto que respetará los saltos de línea explícitos.

Puede encontrar más información aquí sobre white-space:

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

---

Para finalizar, puede utilizar estas declaraciones CSS:

.parent-container { 
    white-space: pre-line /* Create new line for each DIV */; 
    line-height:0 /* Mask the extra lines */; 
    *white-space: pre /*FixIE7*/; 
    *word-wrap: break-word /*FixIE7*/; 
} 

.centered-holder { 
    display: inline-block; 
    line-height:100% /* Restore a default line-height */; 
    *display: inline /*FixIE7*/; 
    *zoom: 1 /*FixIE7*/; 
} 

Encontré esta pregunta muy interesante, así que doy también las declaraciones de CSS para IE6-7 (pre-line y inline-block arreglos). Debería ser útil para otras personas que tienen un problema similar.

Answer 2

Si quita display: inline-block;, se apilarán uno encima del otro.

Los elementos de nivel de bloque comienzan en una nueva línea, y un DIV es de nivel de bloque por defecto.

Answer 3

O puede simplemente agregar un solo div con bloque de visualización después de los bloques en línea.

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 
.clear-inline { 
    display: block; 
} 

Entonces

<div class="centered-holder">misc content 1</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 2</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 3</div> 
<div class="clear-inline"></div>