¿Cómo puedo ajustar el ancho de DIV para contenidos

tengo un elemento div con estilos adjunta:¿Cómo puedo ajustar el ancho de DIV para contenidos

.mypost { 
    border: 1px solid Peru; 
    font-family: arial; 
    margin: auto; 
    min-width: 700px; 
    width: 700px; 
}

estoy diplaying contenidos puestos de WordPress dentro del bloque DIV pero por simplicidad permiten suponer que sólo hay una <img> dentro de la DIV. Quiero que mi div tenga un ancho mínimo de 700 px y ajuste el ancho si la imagen es más ancha que 700 px.

¿Cuáles son mis opciones para lograr eso? Por favor aconséjame.

ACTUALIZACIÓN

Ver mi violín http://jsfiddle.net/cpt_comic/4qjXv/

Fuente

2011-06-02 Captain Comic

Debería trabajar configurando la posición a absoluta y eliminando la propiedad de ancho –

EDIT2- Sí automática llena el DOM SOZ!

#img_box{   
    width:90%; 
    height:90%; 
    min-width: 400px; 
    min-height: 400px; 
}

la salida de este violín

~~http://jsfiddle.net/ppumkin/4qjXv/2/~~

http://jsfiddle.net/ppumkin/4qjXv/3/

y esta página

http://www.webmasterworld.com/css/3828593.htm

Se eliminó la respuesta original porque era incorrecta.

El ancho es bien- pero la altura restablece a 0

por lo

min-height: 400px;

Fuente

2011-06-02 10:24:17 ppumkin

Esto no funcionará. 'width: auto' hará que el div llene todo el espacio. – kapa

Gracias, pero no mantiene el ancho mínimo. Retire la imagen y vea. –

min-height debe establecerse – ppumkin

Usted podría tratar de usar float:left; o display:inline-block;.

Ambos cambiarán el comportamiento del elemento de predeterminado al ancho del 100% al predeterminado al ancho natural de su contenido.

Sin embargo, tenga en cuenta que también tendrán un impacto en el diseño de los elementos circundantes. Sugeriría que inline-block tendrá menos impacto, así que probablemente sea mejor intentarlo primero.

Fuente

2011-06-02 10:34:12 Spudley

+1 Porque básicamente decimos lo mismo. – kapa

Una forma de lograr esto es estableciendo display: inline-block; en el div. Es por defecto un elemento block, que siempre va a llenar la anchura puede llenar (a menos que la especificación de width por supuesto).

inline-block El único inconveniente es que IE solo lo admite correctamente desde la versión 8. IE 6-7 solo permite configurarlo en elementos naturalmente inline, pero hay hacks to solve this problem.

Existen otras opciones, float, o position: absolute, pero estas tienen otros efectos en el diseño, debe decidir cuál se adapta mejor a su situación.

inline-block jsFiddle Demo

Fuente

2011-06-02 10:37:32 kapa

por qué la respuesta fue incorrecta, usted utilizó el ancho para reducir el tamaño en la demostración de jsFiddle – Adeem

@Adeem Vuelva a leer la pregunta, por favor. El div interno tiene un ancho fijo, y el div externo debe ajustarse al ancho de su contenido, ** pero ** también debe tener un 'min-width'. Mi violín muestra el estado cuando 'min-width' está haciendo su trabajo. Por favor, experimente con el violín y vea que está funcionando (pro tip: aumente el ancho del elemento interno a '300px' y vea qué sucede). – kapa

me gustaría añadir a las otras respuestas esta bastante nueva solución:

Si no desea que el elemento se ponga inline-block, usted puede hacer esto :

.parent{ 
    width: min-content; 
}

El soporte está aumentando rápidamente, por lo que cuando el borde decide ponerlo en práctica, será realmente grande: http://caniuse.com/#search=intrinsic

Fuente

2017-02-23 15:09:27 Vandervals

¿Cómo puedo ajustar el ancho de DIV para contenidos

Respuesta

Cuestiones relacionadas