conseguir fijo div altura para continuar en la línea siguiente

Question

No es en absoluto seguro de que esto es posible, pero en la remota posibilidad, esto es lo que necesito:

• 100px alta div con borde superior e inferior.

• un número desconocido de elementos dentro del div que se muestran horizontalmente dentro de los bordes superior e inferior del div principal.

• Es importante destacar que, si hay más elementos dentro del div que pueden caber horizontalmente, el div debe continuar con una nueva fila de elementos a continuación. Esta segunda fila también debe tener los elementos mostrados horizontalmente entre los bordes superior e inferior del div principal. No quiero que el div simplemente crezca en altura y comience una nueva línea porque esto no permitirá que los bordes superior e inferior aparezcan encima y debajo de cada fila de elementos.

Answer 1

Es posible ajustar la anchura del envoltorio y poner los bloques que son 100px de alto en su interior.

Aquí está el ejemplo: http://jsfiddle.net/BVm5h/

Código:

<div class="wrapper"> 
<div class="myClass">1</div> 
<div class="myClass">2</div> 
<div class="myClass">3</div> 
<div class="myClass">4</div> 
<div class="myClass">5</div> 
<div class="myClass">6</div> 
<div class="myClass">7</div> 
<div class="myClass">8</div> 
<div class="myClass">9</div> 
<div class="myClass">10</div> 
</div> 

CSS:

.wrapper {width: 600px;} 

.myClass { 
border-top: 1px solid #FF0000; 
border-bottom: 1px solid #FF0000; 
width: 100px; 
height: 100px; 
float:left; 
margin-top: 5px; 
} 

div.myClass:last-child { 
width: 100%; 
}​ 

JS:

var no = $('div.myClass').length; 
var wlength = $('div.wrapper').width(); 
var length = $('div.myClass').width(); 
var tno = no*length; 
while(wlength < tno) 
tno=tno-wlength; 
var mw = wlength+length-tno; 
$('div.myClass').last().css('max-width',mw); 

Al cambiar el ancho de la envoltura, puede establecer la cantidad de bloques div que desea en cada fila.

Editar: Se agregó JS si el último elemento se va a extender para toda la fila.

Answer 2

Aprovechamiento de la potencia de las imágenes de fondo.

http://jsfiddle.net/lollero/UTtVJ/1/

Editar: Me di cuenta de que el elemento #bottom-line no se presentó en IE7. Parece que funciona + ie8. Probablemente sea fácil de arreglar. Dado que esta solución no es tan popular, no voy a hacer nada al respecto ..

CSS:

#wrap { 
    background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat top left; 
    float:left; 
    margin-top: 20px; 
    position: relative; 
} 

#inner-wrap { 
    float: left; 
    margin-bottom: -40px; 
} 

#wrap #top-line, 
#wrap #bottom-line { 
    position: absolute; 
    margin: 0px; 
    height: 2px; 
    background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat-x 0px -116px; 
    left: 0px; 
    right: 0px; 
} 

#wrap #top-line { top: -8px; } 
#wrap #bottom-line { bottom: -28px; } 

#inner-wrap > div { 
    margin-bottom: 20px; 
    margin-left:10px; 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #111; 
    border: 1px solid red; 
    text-align: center; 
    color: #888; 
} 


​ 

HTML:

<div id="wrap"> 
    <div id="top-line"></div> 
    <div id="bottom-line"></div> 
    <div id="inner-wrap"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     <div>4</div> 
     <div>5</div> 
     <div>6</div> 
     <div>7</div> 
     <div>8</div> 
     <div>9</div> 
     <div>10</div> 
     <div>11</div> 
     <div>12</div> 
    </div> 
</div>​