Равномерно распределенная сетка изображений

Я был на всем протяжении этого сайта, но пока не нашел достойного решения.Равномерно распределенная сетка изображений

Я делаю сайт для фотографии, на котором есть фиксированный линейный указатель слева, а содержимое div - справа. На странице фотогалереи должна быть сетка эскизов изображений с полями текучей среды, чтобы миниатюры всегда были равномерно распределены по правому (содержимому) div.

Вот структура:

<body> 
<div id="wrapper"> 
<div id="left_column"> 
<div class="navigation"></div> 
</div> 
<div id="right_column"> 

    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 
... 
    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 

</div> 
</div> 
</body>

^Существует виньетка пролонгировать анимации в каждой миниатюрой.

И CSS:

html { 
height: 100%; 
padding:0; 
margin:0; 
} 

body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#wrapper { 
    float: left; 
    height: 100%; 
    width:100%; 
    padding:0; 
    margin:0; 
} 

#left_column { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    z-index:100; 
    width: 240px; 
    height: 100%; 
    overflow: hidden; 
    background-color:#ff0000; 
} 

#right_column { 
background-color:#cccccc; 
width:auto; 
height:100%; 
    margin-left: 240px; 
    position: absolute; 
} 

#thumb_container { 
    position: relative; 
    max-width:50%; 
    min-width:240px; 
    height:auto; 
    border-color:#000000; 
    display: inline-block; 
    margin: 2%; 
} 



#thumb_fx { 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 

    z-index: 100; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
} 

#thumb_fx:hover { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 
} 



.grayscale img{ 
    max-width:100%; 
    min-width:50%; 
    height:auto; 
    position: relative; 
    border:none; 
    z-index: -1; 
    position: relative; 
}

Лучшее решение до сих пор это: http://jsfiddle.net/VLr45/1/ но поля идут слишком плотно перед ДИВ отбрасывается к следующей строке. И я не понимаю, как их регулировать.

Любая помощь?

источник

2013-04-11 user2264516

При расчете количества коробок, которые будут соответствовать, добавить минимальную маржу Вы хотели бы:

маржа пикселей

var boxMinMargin = 10; // 10px 

var columns = Math.floor(parent/(box + boxMinMargin));

http://jsfiddle.net/VLr45/14/

маржа в%

var boxMinMargin = box * 0.1; // 10% of box 

var columns = Math.floor(parent/(box + boxMinMargin));

http://jsfiddle.net/VLr45/24/

Если вы хотите установить поле с помощью CSS, вы можете установить width в вас box класс

.box { 
    margin: 2%; 

    /* 

    or 

    margin-top: 2%; 
    margin-right: 3%; 
    margin-bottom: 4%; 
    margin-left: 5%;  

    */ 
}

http://jsfiddle.net/VLr45/17/

источник

2013-04-11 08:35:01 Johan

Ok Большое спасибо! Как я могу получить процент в качестве поля? то есть теперь пиксели не так ли? – user2264516

Потому что, если я просто удаляю маржи через JS и добавляю их в CSS, слишком большое пустое пространство справа при определенных размерах экрана: http://jsfiddle.net/VLr45/16/ – user2264516

Добавление левого и/или правого полей к css не помогает, потому что маржа обновляется с помощью js. Хммм ... Может быть, для разделения эскизов нужны отдельные divs, если я использую только поля css. – user2264516

Равномерно распределенная сетка изображений

ответ

Смежные вопросы