html - 全部信息打印在一行上

问题描述

我制作了一个 django 文件，并在 html 中向用户显示了一些信息，但是整段信息打印在一行上，我尝试在它们周围放置一个 div，但没有帮助。我希望将信息显示为普通文章，而不是整行显示。我认为这可能与某些 div 的大小有关，但我无法指出确切的问题。ps 我试图缩短代码，这就是它如此不整洁的原因。

{% block content %}
<div class="container" >
<div class="pl-5 ">
  <article class="media content-section">
    <div>
      <div>
        <div id="parent" >
          <div class="">
            <br>
            <img class="rounded-circle article-img" height="75" width="75" src="{{ post.author.profile.image.url }}">
          </div>
             <div>
              <div class="container">
                <a  class="mr-2 text-secondary" href="{% url 'user-posts' post.author.username %}"> <h4>{{ post.author }}</h4></a>
                <small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
              </div>
               <div class="container">
              {%if post.author == request.user%}
              &nbsp <a  href="{% url 'post-delete' post.id %}"> <i title="Delete Post" class="far fa-trash-alt"></i></a> &nbsp |  <a  href="{% url 'post-update' post.id %}">edit</a>
              {% endif %}
               </div>
           </div>
      </div>   
            <div class="ml-3 ">
              <div class="container">
            <h3>{{ post.title }}</h3>
            <p class="article-content">{{ post.content }}</p>
            {% load static %}
            {% if post.image %}
            <div class="container">
            <img id="media" style="max-width:95%;height:auto;" class="" src="{{ post.image.url }}" >
            <div>
              <div>
            <a href="{{ post.image.url }}"><button class="btn mt-2 mb-2"><i class="fas fa-search-plus"></i>

</button></a></div>  
            </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </article>
</div>
</div>




<style type="text/css">

.deletebutton {
  font-size: small;
  color: hotpink;

 }
 #viewallcomments{
  font-size: medium;
 }
 #container {
    width: 500px;
}
#first {
    width: 50px;
    float: left;
}
#second {
    width: 50px;
    float: left;
}
#third{
  width: 50px;
  float: right;
  margin-right: 25%;
}
#clear {
    clear: both;
}
 #reportcontainer {
    width: 100%;
}
#reportfirst {
    width: 250px;
    float: left;
}
#reportsecond {
    width: 50px;
    float: left;
}

</style>
</div>













































{% endblock %}

标签： html

html - 全部信息打印在一行上

问题描述

解决方案

推荐阅读