Alinee el ancho del contenedor div con la sum de div flotante

Tengo el siguiente html:

wookie1
...
wookie5

Considera que es como una galería de imágenes.

main_container tiene un tamaño no fijo, se establece como un porcentaje de la resolución del usuario. Quiero que sub_container tenga el ancho exacto de la sum del div flotante.

Si uso “display: table”; para sub_container y “display: inline-block;” para divs flotantes, funciona bien:

enter image description here

hasta que tenga suficiente div en la lista, de modo que la sum del ancho sea mayor que main_container y se rompa en la siguiente línea:

enter image description here

Pero aún así, quiero que el subcontenedor (fondo amarillo) sea SIEMPRE el ANCHO EXACTO de la sum de los divs, incluso cuando van en varias líneas, como esta:

enter image description here

He buscado en Google durante horas y no he podido encontrar una solución elegante (solo CSS, si es posible).

Aquí está el jsfiddle , para jugar con esto.

Solución Pure CSS

El problema es que para que los artículos “sepan” para pasar a la línea siguiente, el contenedor tiene que haber “llenado” su espacio horizontal disponible, que es su ancho de .main_container . Sin embargo, quiere que el fondo no vaya más allá de lo que se necesita para los elementos reales. Así que he usado los elementos para crear el fondo con la ayuda de pseudo-elementos improvisados.

Aquí está el violín (probado en IE9, Firefox 18, Chrome 24 en una máquina Win 7)

Lo que estoy haciendo es unir el fondo con cada elemento .floating individual, que hace que el elemento más a la derecha sea el control de borde correcto para el tamaño del fondo (tenga en cuenta los dos ejemplos de ancho diferentes en el violín).

La explicación de cada parte se da en los comentarios a continuación. Hay dos limitaciones clave a tener en cuenta:

  1. El .floating no puede tener un conjunto de position , por lo que es una limitación potencial basada en una aplicación particular.
  2. El background debe ser de un color sólido o de un “movimiento” orientado puramente verticalmente (es decir, un degradado que se desvanece de arriba a abajo, o las líneas horizontales funcionarían).

KEY CSS (con comentarios explicativos)

 .sub_container { border-left: 1px solid #333; /* forms its own left border */ overflow: hidden; /* needed for background and border to work */ position: relative; /* positioning background off this */ z-index: 1; /* needs a stacking context */ } .floating { font-size:20px; line-height:30px; padding:0 5px 0 5px; border: 1px solid black; margin: 3px; display: inline-block; /* NOTE: CANNOT be given positioning */ } .floating:after { content: ''; position: absolute; /* will position off subcontainer */ border-top: 1px solid black; /* makes the top/bottom border itself */ border-bottom: 1px solid black; z-index: -1; /* push it to the background */ top: 0; /* set it to top of sub_subcontainer */ bottom: 0; /* set it to bottom of sub_container */ margin-left: -100%; /* shove it past the far left edge of sub_container */ /* next, use padding to bring it back to its position at the end of the text string of .floating */ padding-left: 100%; /* next, add enough padding on the right to compensate for the right padding, right margin, and right border of .floating */ padding-right: 9px; background-color: yellow; /* set your background color */ /* NOTE: this will not work with a background image that has any horizonal differences to it (top to bottom gradient would probably be okay) */ } .floating:before { /* make right border */ content: ''; padding-top: 10000px; /* give it some obscene height that will not be exceeded */ margin: -5000px 0; /* counter the padding height by half size margins top/bottom */ /* next, push this behind the background with an even lower z-index to hide it if it is not the right most element beign used to form the right border */ z-index: -2; border-right: 1px solid black; /* make the right border */ float: right; /* get the before element to the right */ position: relative; /* needs to be adjusted in position */ right: -9px; /* move it same as padding-right of the after element */ display: block; /* give it a display */ } 

Me aburrí al intentar esto y creé un script JS basado en jQuery para resolverlo.

 var t = $(".sub_container").width()/$(".floating").outerWidth(); $(".sub_container").width(parseInt(t) * $(".floating").outerWidth()); 

Manifestación

Vuelve a leer tu pregunta … ya que no te comprometerás con nada (ancho máximo: 80%, 500px, etc.) Rompí todo en el cuarto hijo, según tu ejemplo.

CSS

 .main_container, .sub_container, .floating { outline:1px solid black } .sub_container { background-color:yellow; display:table; padding-left:5px } .floating { float:left; padding:5px; margin:5px 5px 5px 0; } .floating:nth-child(4n+5) { clear:left; float:left; } 

HTML

 
wookie1
wookie2
wookie3
wookie4
wookie5
wookie6
wookie7
wookie8
wookie9

enter image description here

EDITAR (opción 2)
No creo que lo que estás intentando hacer pueda lograrse solo con HTML / CSS. Ofrezco otra solución basada en una corazonada … y su comentario en la Galería de Imágenes.

CSS

 .main_container, .sub_container, .floating { outline:1px solid black } .main_container { text-align:center } .sub_container { background-color:yellow; display:inline-block; max-width:80%; } .floating { display:inline-block; padding:5px; margin:5px; } 

HTML

 
wookie1wookie1wookie1
wookie2
wookie3
wookie4
wookie5
wookie6wookie6
wookie7wookie7wookie7
wookie8
wookie9

No hace que el contenedor se ajuste a los contenidos; sin embargo, (usando max-width ) le permite dejar espacio para respirar desde el contenedor principal y sus niños pueden ser de varios tamaños.

enter image description here

Elimina el ancho del contenedor principal y la posición del contenedor absoluto y deberías estar listo para continuar.

 .main_container { #width:380px; } .sub_container { #position: absolute; } 

Utilice el elemento span en lugar de div para “sub_container”

 .sub_container{background-color:yellow;}