Resultaten in meerdere kolommen

PHP versie: >= 3

Een eenvoudige manier om meerdere resultaten over meerdere kolommen te verdelen. In dit voorbeeld gebruik ik een <ul>, maar dit zou net zo makkelijk met een <div> of <table> kunnen. De truc zit hem in de float:left die je aan het element meegeeft.

Resultaat 1
Resultaat 2
Resultaat 3
Resultaat 4
Resultaat 5
Resultaat 6
Resultaat 7
Resultaat 8
Resultaat 9
Resultaat 10
Resultaat 11

Resultaat 12
Resultaat 13
Resultaat 14
Resultaat 15
Resultaat 16
Resultaat 17
Resultaat 18
Resultaat 19
Resultaat 20
Resultaat 21
Resultaat 22

Resultaat 23
Resultaat 24
Resultaat 25
Resultaat 26
Resultaat 27
Resultaat 28
Resultaat 29
Resultaat 30
Resultaat 31
Resultaat 32
Resultaat 33

Resultaat 34
Resultaat 35
Resultaat 36
Resultaat 37
Resultaat 38
Resultaat 39
Resultaat 40
Resultaat 41
Resultaat 42
Resultaat 43
Resultaat 44

Resultaat 45
Resultaat 46
Resultaat 47
Resultaat 48
Resultaat 49
Resultaat 50
Resultaat 51
Resultaat 52

Broncode

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 100

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 106

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 112

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 119

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 120

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 121

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 199

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 287

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 288

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 289

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 290

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 291

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);

// Array met dummy resultaten
$resultaten = range(1, 52)
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PHPtuts.nl - PHP Snippets - Resultaten in meerdere kolommen</title>

    <link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
    <script type="text/javascript" src="../../inc/mootools.js"></script>

    <style type="text/css">
        ul.resultaten {
            float:left;
            width: 75px;
            border: 1px solid #EFF0F1;
            padding: 5px;
            list-style:none;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <p class="none small align-right"><a href="/codeSnippets/"><-- Terug naar Snippets</a></p>
        <h1>Resultaten in meerdere kolommen</h1>
        <div id="info">
            <p>PHP versie: >= 3 </p>
        </div>

        <p>Een eenvoudige manier om meerdere resultaten over meerdere kolommen te verdelen. In dit voorbeeld gebruik ik een <ul>, maar dit zou net zo makkelijk met een <div> of <table> kunnen. De truc zit hem in de float:left die je aan het element meegeeft.</p>

        <?php
        $aantal_kolommen = 5;
        $items_per_kolom = ceil(count($resultaten) / $aantal_kolommen);
        $teller = 0;

        echo '<ul class="resultaten">'.PHP_EOL;
        foreach($resultaten as $resultaat)
        {
            if($teller == $items_per_kolom)
            {
                echo '</ul><ul class="resultaten">'.PHP_EOL;
                $teller = 0;
            }
            echo '<li>Resultaat '.$resultaat.'</li>'.PHP_EOL;
            $teller++;
        }
        echo '</ul>'.PHP_EOL;
        ?>

        <div class="clear">
            <?php
            // Weergeven broncode
            define('FILE', __FILE__);
            require_once('../broncode.php');
            ?>
        </div>
    </div>


<script type="text/javascript" src="/inc/ga1.js"></script>
<script type="text/javascript" src="/inc/ga2.js"></script>

</body>
</html>