uzyskiwanie stałej wysokości div kontynuować na następnej linii

Question

Wcale nie jestem pewien, że jest to możliwe, ale na znikoma szansa, tutaj jest to, czego potrzebuję:

• 100px wysoki div z górnej i dolnej granicy.

• nieznana liczba elementów w dziale div, które są wyświetlane poziomo w górnej i dolnej krawędzi rodzica div.

• Co ważne, jeśli w elemencie div znajduje się więcej elementów, które mogą zmieścić się w poziomie, element div powinien kontynuować z nowym wierszem pozycji poniżej. Ten drugi wiersz powinien również zawierać elementy wyświetlane poziomo między górną i dolną krawędzią rodzica div. Nie chcę, aby element div po prostu wzrósł w górę i zaczął nową linię, ponieważ nie pozwoli to na wyświetlanie górnej i dolnej krawędzi nad i pod każdym rzędem elementów.

Answer 1

Można ustawić szerokość opakowania i umieścić te bloki, które są 100px wysoki wewnątrz niego.

Oto przykład: http://jsfiddle.net/BVm5h/

Kod:

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

Zmieniając szerokość owijki, możesz ustawić liczbę bloków div w każdym wierszu.

Edytuj: Dodano JS, jeśli ostatni element ma zostać przedłużony dla całego wiersza.

Answer 2

Wykorzystanie potęgi obrazów tła.

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

Edit: Zauważyłem, że element #bottom-line nie pojawił się w IE7. Wydawało się działać + ie8. Prawdopodobnie łatwe do naprawienia. Ponieważ rozwiązanie to nie jest tak popularny, że nie będzie nic o tym zrobić ..

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