6
Digamos que tengo un elemento img dentro de un div, ¿cómo hago que el div tenga el mismo ancho y alto contenido usando CSS?¿Cómo puedo hacer que un div tenga el mismo ancho y alto de su contenido?
A
Respuesta
11
flotante el div haría ShrinkWrap por lo que el div sólo tendría espacio para el contenido en su interior.
Probablemente necesitará usar clear en los elementos que vendrán después.
Otra forma sería usar inline-block.
2
probar esto css:
div {
display: inline;
}
4
inline-block es correcto.
<div style="border:1px solid red;display:inline-block">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" />
</div>
+1
Pensé que el bloque en línea tenía un soporte de navegador limitado (es decir,Pensé que se limitaba a IE), pero probé tu ejemplo en Safari (webkit) * y * Firefox, y funciona como un encanto. ... He estado haciendo esto durante años, aprender algo nuevo todos los días. Gracias Sammy! – Lee
+0
@Lee tienes razón. Acabo de probarlo en IE6, 7 y 8 y el ancho no estaba limitado al tamaño de la imagen en el interior en los tres. Oh, bueno, nunca sentí realmente la necesidad de usar esto yo mismo. – Sammy
4
De forma predeterminada, el div tendrá la misma altura, a menos que lo restrinja de alguna manera, o agregue relleno o margen. Pero el ancho predeterminado llenará el espacio disponible. Si desea que el ancho se reduzca a "reducir" el contenido, tendrá que hacer flotar o colocarlo en posición absoluta.
El problema con esto (según sus necesidades) es que ambos eliminan efectivamente el diseño normal. Si lo necesita para seguir siendo parte de la distribución normal, tendrá que hacer algo como esto (las fronteras están incluidos para que pueda saber lo que está pasando):
<html>
<head>
<title>pdf test</title>
<style type="text/css">
#a {
position:relative;
border: 1px solid green;
}
#b {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div>Top</div>
<div id="a">
<div id="b">
asdf<br/>
typewriter</br>
fdsa
</div>
<div style="clear:both;"></div>
</div>
<div>
Bottom
</div>
</body>
</html>
El div exterior #a obras como una div normal La parte importante aquí es que #a es position: relative. Eso establece un contexto de posicionamiento, dentro del cual flotará #b. Este enfoque "doblemente envuelto" permitirá que el div siga funcionando dentro del diseño como un div "normal", mientras que le permite "olfatear" el ancho/alto desde #b a través de Javascript, si lo necesita.
Entonces ... depende de cuáles sean sus necesidades, pero esto debería orientarlo en la dirección correcta.
buena suerte!
+0
Todo lo que escribí aquí es cierto, y funcionará, pero la respuesta de @ Sammy es probablemente el camino a seguir. – Lee
+0
No veo cómo la 'posición: relativa' es relevante aquí, se limpia el flotador y eso es todo lo que se necesita. Si fuera absoluto y no flotante, entonces lo necesitarías. –
+0
@meder - tienes razón. En este contexto, el div externo no es necesario a menos que use 'position: absolute' en lugar de' float: left' para 'div # b'. – Lee
2
Inline-Block no se admite en IE para ningún elemento de nivel de bloque predeterminado (como div, h1-h ~ etc.).
El comportamiento del bloque en línea consiste en ajustar automáticamente el ancho y la altura, al tiempo que permite cosas como la posición, los márgenes y el relleno. Así que todo lo que realmente necesita hacer es utilizar
<span style="display: inline-block">
</span>
y entonces tendrá un navegador de código compatibles :)
disfrutar.
Cuestiones relacionadas
- 1. ¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div?
- 2. ¿Cómo puedo hacer que un div posicionado absoluto tenga un ancho igual a su matriz menos un margen
- 3. ¿Cómo hacer que un div crezca con el contenido?
- 4. cómo hacer que textarea tenga el mismo ancho en IE y Firefox?
- 5. Cómo evitar que un div y su contenido se impriman
- 6. ¿cómo podemos hacer un div tomar ancho de acuerdo a su contenido automáticamente
- 7. cómo hacer un div de pantalla completa y evitar que el contenido se modifique?
- 8. ¿Cómo puedo hacer que un botón tenga exactamente el mismo tamaño de texto?
- 9. Cómo diseñar un div para que tenga un color de fondo para todo el ancho del contenido, y no solo para el ancho de la pantalla?
- 10. ¿Cómo cambiar un relleno DIV sin afectar el ancho/alto?
- 11. ¿Cómo puedo escalar un div al 100% de alto y ancho dentro de otro elemento?
- 12. ¿Cómo puedo hacer un iframe 100% alto de un div que contiene en Firefox?
- 13. ¿Cómo puedo hacer para que la tabla de estilo tenga el ancho completo del contenedor y hacer que las celdas usen el porcentaje del ancho?
- 14. cómo hacer un iframe html 100% ancho y alto?
- 15. ¿Cómo vincular un ancho/alto div para formar campos?
- 16. ¿Cómo puedo hacer que un DIV ocupe el resto de la altura de un contenedor div?
- 17. ¿Cómo cambio el tamaño de un div automáticamente al tamaño de su contenido cuando el contenido del div ha cambiado?
- 18. Jquery, conozca el ancho y alto de un div con barra de desplazamiento
- 19. Configuración de ancho y alto de DIV en JavaScript
- 20. Div izquierdo 200px ancho, contenido div el resto?
- 21. ¿Cómo hacer que múltiples vistas tengan el mismo ancho?
- 22. ¿Cómo puedo hacer que mi EditText tenga cinco líneas de alto sin usar android: inputType = "textMultiLine"?
- 23. En Android, ¿cómo puedo establecer el alto y ancho de un elemento ListView?
- 24. ¿Cómo hacer que textarea llene el ancho de su ancho principal?
- 25. ¿El contenido de div es más largo que div cuando el ancho está establecido en 100%?
- 26. Raphael.js - imagen con su tamaño original de ancho y alto?
- 27. ¿Cómo puedo permitir que un div establezca automáticamente su propio ancho?
- 28. ¿Cómo obtengo el ancho y alto de un lienzo HTML5?
- 29. Establecer Google Maps Container DIV ancho y alto 100%
- 30. ¿Cómo obtener el ancho y alto de un div con extjs 4?
@Marko - ¿Huh? Olvidé algo? –
+1 Error al leer la pregunta, pensó que estaba intentando que un niño llenara al padre. Va a eliminar ese comentario, brevemente después de este también :) jaja – Marko
¿funciona el bloque en línea en la mayoría de los navegadores? Nunca lo he usado porque no estaba seguro al respecto. – WalterJ89