Answer the question
In order to leave comments, you need to log in
P
P
P4YK2021-06-18 09:05:24
P4YK, 2021-06-18 09:05:24
How to make blocks horizontal?
The code itself:
<!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 %}Here's what it outputs:
1 answer(s)
@P4YK
G
Grisha Nadezhin, 2021-06-18 @P4YK
https://html5book.ru/horizontal-vertical-alignment/
mark as a solution if it helps
Similar questions
D
A
D
J
M
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question