How to make data that comes from Django database appear horizontally?-CodePudding

In this Image, the data appears in vertical format. But I want data in horizontal format.

{% block title %}Blog{% endblock title %}

{% block body %} 


<div >
    <div >


{% for post in posts%}


<div >


<div  style="width: 31.25rem;">
<!-- <div > -->

    <img  src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div >
      <h5 >Card title</h5>
      <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" >Go somewhere</a>
    </div>
  </div>

</div>
</div>

</div>



<div >
    <h2 >{{post.title}}</h2>


    <small>Posted At {{post.date_added}}</small>



    <p>{{post.intro}}</p>


        <a href="{% url 'post_detail' post.slug %}">Read More</a>

</div>


{% endfor %}

{% endblock body %}

Hi There I'm Newbie In Django How Can I Able To Appear Horizontally The Data Is Come From Database

CodePudding user response：

So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside

Check This Code

{% extends 'base.html' %}

{% block title %}Blog{% endblock title %}

{% block body %} 


 <div >
    <div > 


{% for post in posts%}


<div >


<div  style="width: 31.25rem;">
<!-- <div > -->

    <img  src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div >
      <h5 >{{post.title}}</h5>
      {{post.date_added}}
      <p >{{post.intro}}</p>
      <a href="{% url 'post_detail' post.slug %}" >Go somewhere</a>
    </div>
  </div>

</div>





{% endfor %}
</div>

</div>

{% endblock body %}