CSS, en línea de visualización y tres divs

que tienen este código HTML:CSS, en línea de visualización y tres divs

<body> 
    <div id="div0" style="display:inline; background-color:green; width:100%"> 
     <div id="div1" style="display:inline; background-color:aqua;width:33%">&nbsp;</div> 
     <div id="div2" style="display:inline; background-color:red;width:33%">&nbsp;</div> 
     <div id="div3" style="display:inline; background-color:yellow;width:33%">&nbsp;</div> 
    </div> 
</body>

Quiero llenar la página con div1, div2 y div3 pero no llenan todo el ancho .

¿Qué está pasando?

Fuente

2009-04-24 VansFannel

Tomado de display declaration:

display: inline significa que el elemento se muestra en línea, dentro de la bloque actual en la misma línea. Solo cuando está entre dos bloques, el elemento forma un 'bloque anónimo', que, sin embargo, tiene el ancho más pequeño posible.

No se puede dar un conjunto de elementos en línea de ancho o alto, se ignorarán. Un elemento debe tener un tipo de visualización de block para hacer eso. Sin embargo, el ajuste display: block no logrará lo que desea ya que cada elemento ocupará todo el ancho. float: left hará que se acumulen hacia la izquierda y también forzará display: block.

<head> 
<style type="text/css"> 
#wrap { 
    width:100%; 
} 
#wrap:after { 
    /* Prevent wrapper from shrinking height, 
    see http://www.positioniseverything.net/easyclearing.html */ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
#wrap .container { 
    float: left; 
    width:33%; 
} 
</style> 
</head> 
<body> 
    <div id="wrap"> 
     <div class="container"> </div> 
     <div class="container"> </div> 
     <div class="container"> </div> 
    </div> 
</body>

Mmmmm, la semántica

Véase la respuesta de Phunky nuevos comentarios sobre flotante.

Fuente

2009-04-24 10:44:00 roryf

¿Es solo yo o esta respuesta da como resultado exactamente la misma pantalla que el código en la pregunta original? Copié el texto de arriba en un editor de texto y guardé el archivo como un archivo HTML después de agregar colores para que podamos ver los diferentes div's. Todavía no llena todo el ancho de la ventana. – Gineer

¿Qué navegador? Funciona bien para mí en FF3 e IE7. – roryf

¡Soy nuevo en CSS y su respuesta incluye muchas referencias útiles! ¡Gracias! – Bush

<body> 
    <div id="div0" style="float: left; background-color:green; width:100%"> 
     <div id="div1" style="float: left; background-color:aqua;width:33%">&nbsp;</div> 
     <div id="div2" style="float: left; background-color:red;width:33%">&nbsp;</div> 
     <div id="div3" style="float: left; background-color:yellow;width:33%">&nbsp;</div> 
    </div> 
</body>

Esto debería funcionar para usted. Y la razón por la que IIRC es esa pantalla: inline no toma% width.

Fuente

2009-04-24 09:49:49

Usted también puede flotar: a la izquierda en DIV0 – Greg

Done :) gracias. –

display:inline shrink envuelve el contenido. Es posible que desee probar float:left en su lugar.

Fuente

2009-04-24 09:51:00 annakata

Utilice la posición relativa en el exterior <div> y flote el interior <div> s. No use display: inline.

<body> 
    <div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;"> 
    <div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div> 
    <div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div> 
    <div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div> 
    </div> 
</body>

Fuente

2009-04-24 09:53:56 Tomalak

Rory Fitzpatrick tiene más o menos la respuesta ideal para usted, aunque no hay necesidad de establecer pos: rel en la envoltura # porque ya es un elemento de bloque relativo y abarcará todo el ancho de manera predeterminada.

Cuando flotas un elemento de bloque imita la funcionalidad de alineación de la pantalla: en línea y en un mundo ideal tendríamos acceso a la pantalla muy útil: inline-block que habría hecho exactamente lo que esperabas que hiciera.

Pero una cosa que debes recordar cuando los elementos flotantes es que solo ocuparán el espacio que requieren (esto incluye margen y relleno) a menos que establezcas un ancho fijo.

Es por esto que Rory utilizó ancho: 33%; ya que es lo mejor que vas a obtener :)

Idealmente, esto habría sido un comentario en la publicación de Rorys, pero todavía no tengo un conteo de publicaciones lo suficientemente alto.

Fuente

2009-04-25 20:05:14 Phunky

Se ha eliminado pos: rel y está vinculado a esta respuesta :) – roryf

En lugar de utilizar float, puede usar flexbox para un cambio de tamaño más sensible. También esto obliga a los elementos a permanecer en una fila.

Ejemplo:

<head> 
    <style type="text/css"> 
    #wrap { 
     width:100%; 
     display:inline-flex; 
    } 
    #wrap:after { 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
     display: inline-flex; 
     flex-direction: row;  
    } 
    .container1 { 
     width:20%; 
    } 
    .container2{ 
     width:80%; 
    } 
    </style> 
</head> 
<body> 
<div id="wrap"> 
    <div class="container1"> </div> 
    <div class="container2"> </div> 
</div>

Fuente

2014-01-03 18:02:13 Fralle

La mejor manera de lograr esto, en contra de todas las respuestas dadas antes, se pueden encontrar haciendo referencia a la respuesta a esta pregunta:

3 inline-block divs with exactly 33% width not fitting in parent

La más rápida y La manera más sencilla no es la más bonita de ver (poner los div en la misma línea para eliminar el espacio en blanco automático que se proporciona normalmente), pero funcionará tremendamente para lo que desee. La respuesta a la que me refiero contiene muchas otras formas que, en mi opinión, son mejores que las que se proporcionaron anteriormente, y abordan el verdadero problema que está teniendo.

¡Aquí está el código que funciona exactamente como lo desea, y un enlace al violín!

<body> 
<div id="div0" style="float: left; background-color:green; width: 100%;"> 
    <div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%">&nbsp;</div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%">&nbsp;</div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%">&nbsp;</div> 
</div>

https://jsfiddle.net/stopitdan/uz1zLvhx/

Fuente

2017-03-07 19:26:27 Dan

CSS, en línea de visualización y tres divs

Respuesta

Cuestiones relacionadas