pantalla - div horizontal css
¿Cómo hacer crecer un div horizontalmente por su contenido? (9)
Dependiendo de para qué uses esto, supongo que el elemento div será el foco principal de la página; si este es el caso, puede tomar ese width: 2000px; línea y simplemente aplicarlo al cuerpo en lugar de directamente al elemento de nivel de bloque que desea estirar:
<style>
body
{
width: 2000px;
}
</style>
Si este método no funciona para usted por la razón que sea, crear una imagen de píxeles transparente y darle el ancho que necesita debería funcionar igual de bien.
por favor, ¿alguien me puede explicar por qué el div rojo no se está expandiendo hacia la derecha? Se detiene donde termina la pantalla. ¿Qué tengo que hacer para expandirlo?
Una cosa que funciona es "mostrar: tabla-celda" el div rojo, pero me preguntaba si hay otra forma y por qué sucede esto ...?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<div style="background-color: #f00;">
<div style="width: 2000px; height: 100px; " />
</div>
</body>
</html>
El ancho del div interno puede cambiar, necesito hacer crecer el externo así que no puedo asignarle un ancho.
El div en el que está contenido es más pequeño que 2000 px. Debes hacer algo como esto:
<div style="background-color: #f00; width: 2000px;">
<div style="width: 2000px; height: 100px; " />
</div>
Por supuesto, ahora el ancho del div interno no necesita ser especificado a menos que sea diferente al div externo.
Eso es realmente extraño. Prueba a flotar el exterior:
<div style="background-color: #f00; float:left;">
<div style="width: 2000px; height: 100px;" />
</div>
put <div style="min-height: 100px; " />
cuando crezca más el contenido, nuestro div crecerá automáticamente.
Poner overflow: auto; en el estilo de los padres <div> .
Verifique con este. expandirá el contenedor a medida que el texto continúe ...
<div style="background-color: #f00; height: 100px; display: inline-block;">
<div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
here is some content
</div>
</div>
Parece que el ancho máximo de div principal está limitado por el ancho de la pantalla del navegador a pesar de que el ancho del div infantil crece más allá del ancho de la pantalla del navegador. Este es un descubrimiento extraño ...
Sugiero usar float en div principal. (ref: crescentfresh ) Sé con certeza que Table-cell no funciona para IE6. Y una prueba rápida en IE7 en mi máquina tampoco funciona, aunque debería ...
Esto debería funcionar. (EDITAR: Esto no funciona ...)
<div style="background-color: #f00; width: auto;">
<div style="width: 2000px; height: 100px; "></div>
</div>
<div style="background-color: #f00;">
<div style="width: 2000px; height: 100px; " />
</div>
Cerrar una etiqueta DIV como esa (es decir, una etiqueta de cierre automático) causará problemas.
Puede ser legal ( Ver este hilo SO ) pero en mi experiencia a menudo causa un comportamiento extraño.
Sin embargo, ese no es el problema. El siguiente código funciona en Chrome e IE9.
<div style="background-color: #f00; display: inline-block; height: 100px;">
<div style="width: 3000px; background-color: blue; height: 50px;">
here is some content
</div>
</div>
Display: inline-block; le dice al elemento que crezca tanto (o tan poco) como sea necesario.
Fiddle: http://jsfiddle.net/sArvr/
Esto parece una conducta contraintuitiva.