如何在回显四个项目后创建一个新列？

Question

So, I'm making a shop for my virtual, online game and I want there to be four items for every row. The items are fetched from the database. I'm using bulma for the css framework. I basically want the rows to be a little like this: http://bloxtopia.xyz/Shop/ <- (Where the items are)

Here's what it would look like on the front end side

  <div class="column"> item 1 </div><div class="column"> item 2 </div><div class="column"> item 3 </div><div class="column"> item 4 </div></div> <div class='columns'><div class="column"> item 5 on new line because of (<div class='columns'><div class="column">) </div> 

So basically, after every four items are echoed, <div class='columns'> is added

Answer 1

You can use this, it will automatically return you 4-columns in a row.

 * { box-sizing: border-box; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ margin-bottom: 5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } 

 <h2>Four Equal Columns</h2> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> </div> 

Answer 2

Is there a specific need to create a new group of columns? Bulma allows multiline column containers. https://bulma.io/documentation/columns/options/

As @Christhofer Natalius mentioned, use .is-one-quarter on the columns, but don't forget the .is-multiline on the main .columns container!

This method allows you to not care how many items are returned, they will wrap accordingly without needing to make a new column wrapper for every 4 items.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/> <div class="columns is-multiline is-mobile"> <div class="column is-one-quarter">item 1</div> <div class="column is-one-quarter">item 2</div> <div class="column is-one-quarter">item 3</div> <div class="column is-one-quarter">item 4</div> <div class="column is-one-quarter">item 5</div> <div class="column is-one-quarter">item 6</div> <div class="column is-one-quarter">item 7</div> <div class="column is-one-quarter">item 8</div> </div>