Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

opencart 3 и FlexBox


Linderov

Recommended Posts

Здравствуйте!

Возможно кто-то сможет мне подсказать...

Хочу сделать вывод товаров на главной через latest.twig адаптивным  с помощью FlexBox.

Вроде бы все сделал правильно и товары выстраиваются в одну строку в зависимости от размера экрана, но как только обрамляю необходимые блоки тегами {% for product in products %} и {% endfor %}, flexbox перестает работать и блоки товаров выстраиваются один под одним. Если можно, подскажите, пожалуйста, как это исправить

 

	<div class="container">
			<div class="box">
			{% for product in products %}
			<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
			<div class="price">{{ product.price }}</div>
			{% endfor %}
		</div>
	</div>
.container {

	height:auto;
	display:flex;
	flex-wrap:wrap;
	max-width:1000px;
	flex-direction:row;
	justify-content:center;

}
.box {
	flex-basis:300px;
}
.price {
	color: #000000;
}

Вот так  не работает

Надіслати
Поділитися на інших сайтах


Всем спасибо!

Оказалось, что нужно сделать так:

	<div class="container">
	{% for product in products %}
			<div class="box">
			<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
			<div class="price">{{ product.price }}</div>
		</div>
		{% endfor %}
	</div>

 

  • +1 1
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.