Du kan göra detta med modulusoperatorn, men det är faktiskt möjligt med bara CSS.
Använder display: inline-block
, kan du få en bra kolumneffekt. Ta en titt på denna JSFiddle här
. Jag använder bara JavaScript för att jag är lat. <div>
listan skulle genereras av PHP i ditt fall. Om du vill begränsa dem till en viss bredd, lägg dem bara i en container <div>
med en fast bredd.
Jag har kommit på en lösning med hjälp av tabeller, vilket verkligen är vad du borde göra (du har inte angett några speciella användningsfall). Koden finns nedan, samt en fungerande demo här .
$columns = 4; // The number of columns you want.
echo "<table>"; // Open the table
// Main printing loop. change `30` to however many pieces of data you have
for($i = 0; $i < 30; $i++)
{
// If we've reached the end of a row, close it and start another
if(!($i % $columns))
{
if($i > 0)
{
echo "</tr>"; // Close the row above this if it's not the first row
}
echo "<tr>"; // Start a new row
}
echo "<td>Cell</td>"; // Add a cell and your content
}
// Close the last row, and the table
echo "</tr>
</table>";
Och för att avsluta har vi vår kolumncentrerade layout, denna gång tillbaka till div
s. Det finns lite CSS här; detta ska läggas i en separat fil, inte lämnas inline .
<?php
$rows = 10; // The number of columns you want.
$numItems = 30; // Number of rows in each column
// Open the first div. PLEASE put the CSS in a .css file; inline used for brevity
echo "<div style=\"width: 150px; display: inline-block\">";
// Main printing loop.
for($i = 0; $i < $numItems; $i++)
{
// If we've reached our last row, move over to a new div
if(!($i % $rows) && $i > 0)
{
echo "</div><div style=\"width: 150px; display: inline-block\">";
}
echo "<div>Cell $i</div>"; // Add a cell and your content
}
// Close the last div
echo "</div>";
?>