sinneren
@sinneren

Обрезка по сумме длин и отступов картинок каждую строку, что делаю не так?

Есть набор картинок в дивах, все картинки либо 170, либо 270 px. После каждой отступ 30px. В сумме,когда набирается ширина блока-родителя, нужно обрезать у последней отступ. Это нужно для красивого отображения от начала границы и до нее, а так же для масштабирования на моб.устройствах.
Пример блока
<div class="gmenu-item">
	<div class="gmenu-item-text-wrap"><h4>Боулинг</h4></div>
	<a href="#"><div class="gmenu-item-hover"></div></a>
	<img src="image/m06.jpg" alt="" />
	</div>

CSS важен в данном случае только для обертки, остальное не влияет,т.к. либо не имеет параметров, либо абсолютно позиционировано.
.gmenu-item {
margin-bottom: 30px;
margin-right: 30px;
float: left;
position: relative;
}

И сам код. Это уже не первый вариант реализации, но думаю такой самый лучший. Тут вопрос скорее как при данной реализации сделать правильно,пробовал и без %, со сравнением длин, без толку.
var mgal = $(".menu-gallery img");
    var iterMgalWidth = 0;
    var itemMargin = 30;
    for(var i = 0; i < mgal.length; i++){
        //Копим из ширины картинки, +30 отсуп вправо из стилей, сравниваем с шириной контейнера-родителя и убираем у последней
        iterMgalWidth = iterMgalWidth + mgal[i]["clientWidth"] + itemMargin;
       
        if(!((iterMgalWidth-itemMargin) % maxWhCont)){
            $(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
        }
    }

UPD:
//Коллекция всех картинок, сброс
    var mgal = $(".menu-gallery img");
    var iterMgalWidth = 0;
    var itemMargin = 30;
    for(var i = 0; i < mgal.length; i++){
        //Копим из ширины картинки, +30 отсуп вправо из стилей, сравниваем с шириной контейнера-родителя и убираем у последней
        iterMgalWidth = iterMgalWidth + mgal[i]["clientWidth"] + itemMargin;
        if((iterMgalWidth-(itemMargin*2)) == maxWhCont){
            $(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
            iterMgalWidth = 0;
        } 
        /*иной вариант
if(!((iterMgalWidth-itemMargin) % maxWhCont)){
            $(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
        }*/
    }
    iterMgalWidth = 0;
  • Вопрос задан
  • 2265 просмотров
Пригласить эксперта
Ответы на вопрос 1
soorax
@soorax
Веб дизайнер
.gmenu-item:first-child {
maright:0;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 11:14
65000 руб./за проект
19 апр. 2024, в 11:08
5000 руб./за проект
19 апр. 2024, в 10:59
150000 руб./за проект