如何将每个新帖子彼此相邻对齐？

问题描述 投票：0回答：1

我正在这个博客上工作，我希望每当用户发表新帖子时，它就会显示在其他帖子旁边而不是在它们下面，但我不知道我应该做什么，到目前为止我有这些卡片，但它们一直显示在下面彼此 如果我需要发布代码的另一部分，请告诉我

我很感谢您的帮助

I want it to be something like this

post.html

{% extends "online_shop/base.html" %}
{% load static %}
{% block content %}
    {% for post in posts %}

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
  
        <body>
          
           <div style="margin-top: 35px;"></div>

            <div class="card-deck" style="max-width: 300px;">
              <div class="card row">
                <img class="card-img-top" src="{% static 'online_shop/unicorn-cake-14.jpg'%}" alt="Card image cap" width="300" height="310">
                <div class="card-body">
                  <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
                  <p class="card-text">{{ post.content }}</p>
                  {{ post.content|truncatewords_html:15 }}
                </div>
                <div class="card-footer">
                  <small class="text-muted"><a href="#">{{ post.author }}</a></small>
                  <small class="text-muted" style="margin-left: 5px;">{{ post.date_posted|date:"F d, Y" }}</small>
                </div>
              </div>
            </div>
        </body>
    {% endfor %}
{% endblock content %}

html css django bootstrap-4
1个回答
0
投票

请仔细阅读代码并在整个页面上运行代码片段。 我在你的博客页面上做了一些与你想要的类似的东西。

我使用了 display : flex 来使页面响应和用户交互。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }

body{
    background: rgb(235, 235, 235);
    
  }

.flex-box {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.card-1{
    position: relative;
    width: 480px;
    height: 720px;
    background: #eaf5f0;
    border-radius: 5px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.15);
    transition: 0.5s;
    margin: 25px;
  }

.card-1 .heading-1{
    margin: 10px;

}
.card-1 .content-1{
    position: relative;
    height: 100%;
    width: 480px;
    padding-left: 10px;

}

.card-1 .extra-1{
    position: relative;
    padding : 10px;
    color: black;
    font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="q3.css" />
    <title>Blog</title>
  </head>
  <body>
    <div class="flex-box">
        <div class="card-1">
            <div class="image-1">
                <img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
            </div>

            <div class="detail-1">
                <h2 class="heading-1">Lorem ipsum </h2>

                <p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                
                <p class="extra-1"> DATE : dd/mm/yyyy</p>

            </div>
        </div>

        <div class="card-1">
            <div class="image-1">
                <img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
            </div>

            <div class="detail-1">
                <h2 class="heading-1">Lorem ipsum </h2>

                <p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                
                <p class="extra-1"> DATE : dd/mm/yyyy</p>

            </div>
        </div>

        <div class="card-1">
            <div class="image-1">
                <img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
            </div>

            <div class="detail-1">
                <h2 class="heading-1">Lorem ipsum </h2>

                <p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                
                <p class="extra-1"> DATE : dd/mm/yyyy</p>

            </div>
        </div>
        
    </div>
    <script src="script.js"></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.