2012-04-23 23 views
6

No es en absoluto seguro de que esto es posible, pero en la remota posibilidad, esto es lo que necesito:conseguir fijo div altura para continuar en la línea siguiente

  • 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.

enter image description here

+1

necesito una imagen. ¿Puedes hacer un garabato de MSPaint o algo así? Si agrega cosas al div, tendrá que crecer en altura. – stommepoes

+0

¿es vertical u horizontal? – sandeep

+1

use: 'float: left;' para sus cajas. De lo contrario, utilice la imagen añadida de ECMAscript –

Respuesta

4

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.

+0

+1 con el CSS es una buena solución – sandeep

+0

Aquí hay más mejor violín http://jsfiddle.net/tAByD/2/ – sandeep

+0

Muchas gracias. Mi único problema con este enfoque es que si quitas el último elemento (10), puedes ver que los bordes no cruzan la página como lo harían si el envoltorio tuviera el borde CSS. De cualquier forma alrededor de esto? –

1

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>​ 
Cuestiones relacionadas