P4YK
@P4YK

Как сделать блоки горизонтальными?

Сам код :
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
{% extends "main.html" %}
{% load i18n %}
{% load static %}
{% block title_page %}
  <title>Магазин</title>
{% endblock title_page %}
{% block content %}
 {% if user.is_authenticated %}
    <div style="position: absolute; right: 50%; transform: translateX(50%); margin-top: 45px;">
      <button onclick="window.location.href = '{% url 'account:profile' %}'" type="submit" class="btn btn-outline-info">Профиль</button>
      <button onclick="window.location.href = '{% url 'account:logout' %}'" type="submit" class="btn btn-outline-info">Выход</button>
    </div>
  {% else %}
    <div style="position: absolute; right: 50%; transform: translateX(50%); margin-top: 30px;">
      <button onclick="window.location.href = '{% url 'account:register' %}'" type="submit" class="btn btn-outline-info">Регистрация</button>
      <button onclick="window.location.href = '{% url 'account:login' %}'" type="submit" class="btn btn-outline-info">Вход</button>
    </div>
  {% endif %}
<body>
<section class="main-section paddind" id="Portfolio">
  <!--main-section-start-->
    <!-- <a class="btn btn-outline-secondary" style="position: absolute; float: right; margin: 0;">Регистрация</a> -->
    <!-- <a class="btn btn-outline-secondary" style="position: absolute; float: right; margin: 0;">Вход</a> -->
    <h2>Магазин</h2>
    <h6>У нас большой асортимент товаров.</h6>
    <div class="portfolioFilter">
      <ul class="Portfolio-nav wow fadeIn delay-02s">
        <li><a href="#" data-filter="*" class="current">Все</a></li>
        <li><a href="#" data-filter=".branding">Смартфоны</a></li>
        <li><a href="#" data-filter=".webdesign">Ноутбуки</a></li>
        <li><a href="#" data-filter=".printdesign">Компьютеры</a></li>
        <li><a href="#" data-filter=".photography">Аксессуары</a></li>
      </ul>
    </div>
  <div id="main" class="product-list">
        {% for product in products %}
         <div class="main inline">
            <div id="main" class="item">
                 <a href="{{ product.get_absolute_url }}">
                    <img style="max-width: 220px; height:220px; border-radius: 5px 5px 0 0;" src="{% if product.image %} {{ product.image.url }} {% else %} {% static "img/no-image-icon.png" %} {% endif %}" />
                </a>
                <a href="{{ product.get_absolute_url }}">
                    <p style="left: 5px; top:5px;^Mposition: relative; font-family: 'Montserrat', sans-serif; color: #222222;^Mtext-transform: uppercase; text-decoration: none;"> {{ product.name }}</p>
                </a>
                <br/>
                <div class="price-producy" style="left: 5px;^Mposition: relative; font-family: 'Montserrat', sans-serif; color: #222222;^Mtext-transform: uppercase; text-decoration: none;">
                {{ product.price }}  
            </div>
         </div>
        {% endfor %}
 </div>
   </div>
  </div>
</section>
</body>
<style>
html, body{margin:0;padding:0;}

.main {
margin:0 auto;
width:100%;
max-width:800px;
}

.inline div{
display:inline-block;
-moz-box-sizing: border-box;
vertical-align:top;
font-size:16px;
zoom: 1;
*display: inline;

}
div.inline{font-size:0;}

.item{
width:30%;
height:300px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
</style>
{% endblock %}


Вот что ввыодит: 60cc379b5b598897781116.png
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
omi_yang
@omi_yang
я начинающий и еще мало чего понимаю
https://html5book.ru/horizontal-vertical-alignment/
отметь решением если поможет
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы