получение фиксированной высоты DIV, чтобы продолжить на следующей строке

Question

не уверен, что это возможно, но на всякий случай, вот что мне нужно:

• 100px высокий ДИВ с верхней и нижней границы.

• неизвестное количество элементов в пределах div, которые отображаются горизонтально в верхней и нижней границах родительского div.

• Важно отметить, что если в элементе содержится больше элементов, которые могут поместиться по горизонтали, div должен продолжить новый ряд элементов ниже. Эта вторая строка также должна иметь элементы, отображаемые горизонтально между верхней и нижней границами родительского div. Я не хочу, чтобы div просто увеличивался в высоту и начинал новую строку, потому что это не позволит верхним и нижним границам появляться над и под каждой строкой элементов.

Answer 1

Вы можете установить ширину обертки и положить эти блоки, которые 100px высоко внутри него.

Вот пример: http://jsfiddle.net/BVm5h/

Код:

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

Изменяя ширину обертки, вы можете установить количество блоков div, которые вы хотите в каждой строке.

Редактировать: Добавлен JS, если последний элемент должен быть расширен для всей строки.

Answer 2

Использование мощности фоновых изображений.

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

Edit: я заметил, что #bottom-line элемент не отображается в IE7. Казалось, что он работает + ie8. Наверное, легко исправить. Поскольку это решение не так популярны, я не буду об этом ничего делать ..

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