ottenendo Altezza fissa div a continuare sulla riga successiva

Question

Niente affatto sicuro che questo è possibile, ma sulla remota possibilità, qui è quello che mi serve:

• 100px alta div con bordo superiore e inferiore.

• un numero sconosciuto di elementi all'interno del div visualizzati orizzontalmente nei bordi superiore e inferiore della div principale.

• È importante notare che se all'interno del div sono contenuti più elementi che possono essere adattati orizzontalmente, il div dovrebbe continuare con una nuova riga di elementi di seguito. Questa seconda riga dovrebbe anche avere gli oggetti visualizzati orizzontalmente tra i bordi superiore e inferiore del div genitore. Non voglio che il div cresca semplicemente in altezza e inizi una nuova riga perché questo non permetterà che i bordi superiore e inferiore appaiano sopra e sotto ogni riga di elementi.

Answer 1

È possibile impostare la larghezza della confezione e mettere quei blocchi che sono 100px alta al suo interno.

Ecco l'esempio: http://jsfiddle.net/BVm5h/

Codice:

<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); 

Cambiando la larghezza del wrapper, puoi impostare il numero di blocchi div che desideri in ogni riga.

Modifica: Aggiunto JS se l'ultimo elemento deve essere esteso per l'intera riga.

Answer 2

Sfruttare la potenza delle immagini di sfondo.

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

Edit: ho notato che l'elemento #bottom-line non si fece vedere in IE7. Sembrava funzionare + ie8. Probabilmente è facile da risolvere però. Dal momento che questa soluzione non è così popolare, non voglio far nulla ..

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