Du kan gøre dette ved at bruge modulus-operatoren, men det er faktisk muligt med kun CSS.
Brug af display: inline-block
, kan du få en god kolonneeffekt. Tag et kig på denne JSFiddle her
. Jeg bruger kun JavaScript, fordi jeg er doven; <div>
liste ville blive genereret af PHP i dit tilfælde. Hvis du vil begrænse dem til en bestemt bredde, skal du bare lægge dem i en beholder <div>
med en fast bredde.
Jeg har fundet en løsning ved hjælp af tabeller, hvilket virkelig er, hvad du bør gøre (du har ikke givet nogen specielle use cases). Koden er nedenfor, samt en fungerende demo her .
$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>";
Og for at afslutte, har vi vores søjlecentrerede layout, denne gang går vi tilbage til div
s. Der er noget CSS her; dette skal placeres i en separat fil, ikke efterladt 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>";
?>