How to make divisions go on a new line? html/css

user_19566285 0
Viewed 27

So, I want maximum of 3 div's per row, so when I use "for" loop after 3 instances it would automatically go to a new line. I have very little knowledge in js, so it'll be better if you can suggest me something not connected with it. Thank you in advance. (Making this template for my first django project).

.main-section{
    background: white;
    text-align: center;
    border: solid 1px #D1BEA8;
}

.book-list-main{
    display: table;
    table-layout: fixed;
    border-spacing: 30px;
}

.single-book{
    display: table-cell;
    width: 310px;
    height: 400px;
    margin: 0 20px 20px 10px;
    grid-column-start: 1;
    border: solid 1px #D1BEA8;
    height: fit-content;
}

.img-description-container{
  display: flex;
}

.single-book h1{
    font-size: 20px;
}

.img-description-container img{
    max-width: 180px;
    max-height: 240px;
    float: left;
}

.img-description-container p{
    float: right;
    font-size: 12px;
    overflow-y: scroll;
    margin-top: 50px;
}

.author-display{
    display: flex;
    flex-direction: column;
}

.author-display span{
    font-size: 14px;
    margin-top: 30px;
    background-color: #f1efe5;
}

.votes-total {
    position: relative;
}
  
.votes-total:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 60px;
    color: black;
    background-color: aliceblue;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    font-size: 11px;
    z-index: 1;
    left: 0;
    top: -110%;
}
  
.votes-total:hover:before {
    opacity: 1;
    visibility: visible;
}

.single-book-footer{
    margin-top: 15px;
    margin-left: 17px;
    display: flex;
    flex-direction: row;
    
}

.single-book-footer button{
    height: 30px;
    margin-top: 15px;
    margin-left: 14px;
}

.single-book-footer button:hover{
    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="tryy.css">
</head>
<body>
    <div class="book-list-main">
                    
        <div class="single-book">
            <h1>BOOK TITLE</h1>
            <hr>
            <div class="img-description-container">
                <img src="images/cover.png" alt="Book Cover">
                <div class="author-display">
                <p>info about it</p>
                <span><strong>Author:</strong> ...</span>
                </div>
            </div>
            <div class="single-book-footer">
                <p><span  class="votes-total" data-hover="(214 Votes)">&#9734 <strong>4.6/5</strong> </span></p>
                <button>Add to Shelf</button>
                <button>Add Review</button>
            </div>
        </div>
        <div class="single-book">
            <h1>BOOK TITLE</h1>
            <hr>
            <div class="img-description-container">
                <img src="images/cover.png" alt="Book Cover">
                <div class="author-display">
                <p>info about it</p>
                <span><strong>Author:</strong> ...</span>
                </div>
            </div>
            <div class="single-book-footer">
                <p><span  class="votes-total" data-hover="(214 Votes)">&#9734 <strong>4.6/5</strong> </span></p>
                <button>Add to Shelf</button>
                <button>Add Review</button>
            </div>
        </div>


        <div class="single-book">
            <h1>BOOK TITLE</h1>
            <hr>
            <div class="img-description-container">
                <img src="images/cover.png" alt="Book Cover">
                <div class="author-display">
                <p>info about it</p>
                <span><strong>Author:</strong> ...</span>
                </div>
            </div>
            <div class="single-book-footer">
                <p><span  class="votes-total" data-hover="(214 Votes)">&#9734 <strong>4.6/5</strong> </span></p>
                <button>Add to Shelf</button>
                <button>Add Review</button>
            </div>
        </div>

        <div class="single-book">
            <h1>BOOK TITLE</h1>
            <hr>
            <div class="img-description-container">
                <img src="images/cover.png" alt="Book Cover">
                <div class="author-display">
                <p>info about it</p>
                <span><strong>Author:</strong> ...</span>
                </div>
            </div>
            <div class="single-book-footer">
                <p><span  class="votes-total" data-hover="(214 Votes)">&#9734 <strong>4.6/5</strong> </span></p>
                <button>Add to Shelf</button>
                <button>Add Review</button>
            </div>
        </div>


    </div>
</body>
</html>

web css django html
1 Answers

Assuming you have a list of books eg:

list_of_books = ["Book 0", "Book 1", "Book 2", "Book 3", "Book 4", "Book 5", "Book 6", "Book 7", "Book 8", "Book 9", "Book 10"]

Then you will need to first convert it into a format like so

list_of_books = [("Book 0", "Book 1", "Book 2"), ("Book 3", "Book 4", "Book 5"), ("Book 6", "Book 7", "Book 8"), ("Book 9", "Book 10")]

here's how i did it

formatted_book_list = []
split = 3

for i in range(0, len(list_of_books), split):
    formatted_book_list.append(list_of_books[i:i+split])

Then in the template you would roughly do

{% for book_row in formatted_book_list %}
    {% for book in book_row %}
        {{ book }}
    {% endfor %}
    <br>
{% endfor %}

ofcourse replace the {{ book }} with whatever you want in that html

user_171326180
Related