Хочу чтобы при добовления какой либо статьи в Django они шли не в низ друг за другом а в право потом в низ ну на блоки раздел

123

12 января 2021, 08:20

Если че использую Jinja, bootstrap3, python(Djnago), css , html, Jquery

wrapper.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device, initial-scale=1.0">
    <title>Rapter</title>
      {% load staticfiles %}
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/main.css' %}"type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <script>
    </script>
  </head>
  <body>
<!-- Шапка -->
    <div class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a href="https://google.com"> <img src="{% static 'MainPage/image/RapterLogo.png' %}" ></a>
        </div>
        <div class="navbar-collapse collapse ">
        <ul class="nav navbar-nav">
          <li class="li"><a href="/news/">Главная</a></li>
          <li class="li"><a href="/shop/">Игры</a></li>
          <li class="li"><a href="/">Товары</a></li>
          <li class="li"><a href="/">О нас</a></li>
          <li id="Buttons"><button class="btn btn-success btn-lg" data-toggle="modal" data-target="#Enter">Войти</button>
          <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#Register">Зарегестрироваться</button></li>

        </ul>
        </ul>
        </div>
      </div>
    </div>

    <div id="headrwrap">
      <div class="container">
        <div class="row centered">
          <div class="col-lg-11 col-lg-offset">

            <div class="container">
            {% block content %}
            {% endblock %}
        </div>
      </div>
    </div>
<!-- Кнопка Войти -->
    <div class="modal fade" tabindex="-1" id="Enter">
      <div class="modal-dialog">
        <div class="modal-content" id="Entered">
          <button class="close" data-dismiss="modal">X</button>
          <h1 class="centered">Войти</h1>
          <h3 class="EnterText">Введите Логин или E-mail</h3>
          <input type="text" class="form-control centered" placeholder="Email or Login">

          <h3 class="EnterText">Введите Пороль</h3>
          <input type="password" class="form-control centered" placeholder="password" >
          <button class="btn btn-info btn-lg" id="EnterButton">Войти</button>
          <a href="#" id="enterVK"> <img src="{% static 'MainPage/image/enterVk.png' %}" > </a>
          <br>
          <a href="#" id="ForgetPasswords" > Забыли пароль</a>

        </div>
      </div>
    </div>
<!-- Кнопка Войти -->

<div class="modal fade" tabindex="-1" id="Register">
  <div class="modal-dialog">
    <div class="modal-content" id="Entered">
      <button class="close" data-dismiss="modal">X</button>
      <h1 class="centered">Регестрация</h1>
      <h3 class="EnterText">Введите Логин или E-mail</h3>
      <input type="text" class="form-control centered" placeholder="Email or Login">
      <h3 class="EnterText">Введите Пороль</h3>
      <input type="password" class="form-control centered" placeholder="password" >
      <h3 class="EnterText">Повторите пороль Пороль</h3>
      <input type="password" class="form-control centered" placeholder="password" >
      <button class="btn btn-info btn-lg" id="RegisterButton">Зарегестрироваться</button>
    </div>
  </div>
</div>
<script src="js/main.js">
</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

products.html (сюда надо блоки добовлять)

{% extends "ShapeHtml/wrapper.html" %}
{% block content %}
    {% for product in object_list  %}

      <div id="next-block">
            <div class="panel panel-default">
              <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ product.img.url }}"/></p>
              </div>
              <div class="panel-body">
                  <a href="/shop/{{product.id}}"> <h1> {{product.title}} </h1> </a>
                  <h3 align="right">{{products.date|date:"d-m-Y"}}</h3>
              </div>
            </div>
        </div>
      </div>
    {% endfor %}
{% endblock %}

main.css

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

body {
  background-color: #77C4C4;
  font-family: "Lato" ;
  font-weight: 300;
  font-size: 16px;
  color: #555;
  -webkit-font-soothing: antialiased;
  -webkit-overflow-scrolling: touch;
  margin-top: 70px;
}
h2,h4,h5,h6{
  font-family: "Lato";
  font-weight: 300;
  color:#333;
}
h3{
  font-family: 'Ramabhadra', sans-serif;
  font-weight: 400;
}
h1{
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color:#333;
}

p{
  line-height: 28px;
  margin-bottom: 25px;
}
.centered{
  text-align: center;
}
a{
  font-family: "Oswald";
  font-size: 30px;
}
a:hover , a:focus{
  color:#7b7b7b;
  text-decoration: none;
  outline: 0;
}
hr {
  height: 1px;
  border: 0;
  border-top:1px solid #ccc;
  margin: 1em 0;
  padding:0;
}

li {
  margin-top:60px;
  margin-left: 10px;
}
.li:active, .li:hover{
  background-color: #ff7878 ;
}


.navbar{
  margin-top: -80px;
  font-weight:800;
  font-size:14px;
  padding-top:15px;
  padding-bottom: 15px;
}
.navbar-inverse{
  background:#005367;
  border-color: #2d2d2d;
}

.navbar-inverse .navbar-brand{
  color: #999 ;
  font-weight: bolder;
  font-size: 22px;
  letter-spacing: 1px;
}
#headrwrap{
  margin: 300px ;
}
#Buttons{
  margin-left: 100px
}
.form-control{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius:4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
  color: #555 ;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  width: 50%;
  margin-top: 20px;
  margin-left: 25%;
}
#Entered{
  height: 500px;
}
#EnterButton{
  margin-top: 50px;
  margin-left: 250px;
}

#enterVK{
  margin-left: 160px;
}
#ForgetPasswords{
  margin-left:240px;
}
#ForgetPasswords:hover{
  color: #DE4E5F;
  text-decoration:underline;
}

#containerEMail{
  margin-left: 25%;
}
.EnterText{
  margin-left: 150px;
}
.close{
  margin-right: 10px;
  margin-top: 10px;
}
#RegisterButton{
  margin-left: 180px;
  margin-top: 30px;
}
#H1changeColor{
    color:white;
}
#next-block{
  width: 300px;
  height: 60px;
  background:#f1f1f1;
  float:left;
  margin-left: 400px;
  padding-top:10px
  text-align:center;
}

Answer 1

Я СМОГГГГГГГГГГГ

products.html

{% extends "ShapeHtml/wrapper.html" %}
{% block content %}
    {% for product in object_list  %}

        <div class="panel panel-default" id="next-block">
          <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ product.img.url }}"/></p>
          </div>
          <div class="panel-body">
                  <a href="/shop/{{product.id}}"> <h1> {{product.title}} </h1> </a>
          </div>
        </div>
    {% endfor %}
{% endblock %}

и это добавить ваш css

#next-block{
    width:300px;
    height:400px;
    margin-left:30px;
    float:left;
}

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Передача данных между формами

Здравствуй ХэшКод, скажите у меня есть

117

собрать все зависимости в один DLL в C# проект

У меня есть проект dll (dllMy) котрая использует ряд других сторонних dll(dllDep) которые я включаю к Reference в проектМне необходимо в номо проекте обращатся...

119

Получить данные из ячейки DataGridView c#

Путем парсинга считываю данные из таблицы excel в datatable, затем уже выставляю в DataGridView, есть ячейки в которых две-три строки, необходимо вытащить...

107

Достать значения по ключу в JSON C# (Newtonsoft.Json) [дубликат]

Всем привет! Есть такой вот JSON -

127