CSS: Parent-Div no crece con sus hijos (horizontal)

Me gustaría que el elemento parent-div (rojo) crezca con el elemento child-div verde. Ahora solo se detiene en la ventana gráfica.CSS: Parent-Div no crece con sus hijos (horizontal)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head> 
<title>simple document</title> 
<style type="text/css"> 
* { 
    font-family: verdana; 
    margin: 0px; 
    padding: 0px; 
} 
</style> 
</head> 
<body> 
<div style="margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
</div> 
</body> 
</html>

No quiero usar display: table; ya que no funciona bien en IE.

¿Alguna idea?

Fuente

2010-03-30 vyden_st

Por qué no hacer el div padre 2000 píxeles? Eso debería funcionar. – Joop

@Joop Obviamente quiere que el ancho del padre dependa del ancho del niño (lo que puede variar según el contenido) –

Correcto :) –

Uso display: inline-block; en la matriz <div> y funcionará como se espera

Fuente

2010-03-30 13:07:33

Sí! ¡Eso es genial! Gracias, nunca pensé que esto funcionaría en IE también, ¡solo aprendí algo útil! –

Quirksmode (http://www.quirksmode.org/css/display.html) dice que no se puede usar la visualización 'inline-block' en los elementos que no están predeterminados como' display: inline' para IE 6 y 7. ¿Lo has probado en esos? –

@Alex Es cierto, pero esta es la solución progresista que se adhiere al estándar. Para abordar navegadores antiguos, los comentarios condicionales se pueden usar para aplicar un 'float' al elemento padre (si es necesario). –

hacer flotar div padre: left; y se expandirá según se desee.

Fuente

2010-03-30 13:10:31 Paul

En FF2 esto no funcionaría _properly_ - el niño crece más grande que el padre ... ¿cómo podríamos resolver esto? Aparentemente, esto se debe al margen de parent-div. –

Necesitarás un elemento claro o puedes usar la solución de modo peculiar que se muestra a continuación. – UpTheCreek

sé que llego tarde, pero aquí es lo que hago para solucionar el problema:

Añadir la clara DENTRO de la matriz en la parte inferior, y hacer que el desbordamiento de los padres: oculto.

Aquí está el código modificado:

.clear{ 
    clear: both; 
    /* make sure there is no height set to it */ 
    line-height: 0; 
    height: 0; 
    font-size: 0em; 
} 

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
<div class="clear">/div> 
</div>

Obras en FF3 e IE7, pero no se ha probado en otros navegadores sin embargo.

Espero, al menos, ayudarlo con su problema.

Fuente

2010-06-01 15:34:17

Ver this solution de quirksmode.org. Es bastante sencillo, basta con aplicar esta clase para el div contenedor/padre:

div.container { 
    overflow: hidden; 
    width: 100%; 
}

Fuente

2010-11-13 09:35:48 UpTheCreek

Uso display: table; en el div principal O puede colocar el div principal en una celda de una tabla.

Fuente

2011-03-06 08:45:56 Bang

Aquí hay demasiados consejos complicados. Aquí hay un consejo: en lugar de juguetear con las celdas de la tabla, y despejar y flotar, solo asegúrese de que el niño tenga un borde que sea equivalente al acolchado que estaba buscando para el padre. Los bordes siempre se dibujan afuera, por lo que hará lo que quieras.

Esto debería funcionar ...

<div style="margin: 30px; background: red;"> 
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div> 
</div>

... en todos los navegadores, sin ningún problema. HTH.

Fuente

2012-05-14 04:16:52 PKHunter

posición de los padres hacer a la relativa y absoluta niño a

Fuente

2013-10-10 06:12:41

CSS: Parent-Div no crece con sus hijos (horizontal)

Respuesta

Cuestiones relacionadas