hulp nodig met aligne/ordenen van mysql data in een div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan deman

jan deman

28/05/2020 17:56:33
Quote Anchor link
goedenavond iedereen,

ik loop tegen een klein probleempje aan, wanneer ik mijn data fetch uit mijn mysql database in een div
en deze probeer te ordenen met 'display:inline-block;' krijg ik al mijn data onder elkaar en het doorbreekt
mijn div dus het ziet er als volgt uit:


data data data data data data etcetc.


maar ik wil dat het er zo uit komt te zien:


data data data
data data data
data data data
etc etc.

ik heb van alles geprobeerd maar al mijn data blijft of naar rechts eindeloos doorgaan of alleen maar onder elkaar, hopelijk is het een beetje te snappen hier is mijn php en css.

<code>

<div class="tester">

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
          echo "<img width='200px' height='150px' src='admin/images-ls/".$row['foto']."' >";
          echo "<p>".$row['naam']."</p>";
             echo"<div id='dv_rtfloat'>";
             echo "<p>".$row['beschrijving']."</p>";
             echo "<td><a href=\"buy.php?id=".$row['id']."\">Buy</a></td>";
             echo"</div>";
      echo "</div>";
    }

  ?>




</div>


</code>


css:



<code>


.tester{
position:absolute;
top:100px;
left:300px;
width:600px;
height:500px;
display:inline-block;
float:left;
}

#img_div{
position:relative;
width:200px;
height:200px;
box-shadow: 10px 5px 5px #69624e;
border-radius:5px;
background-color:#b7b3ea;
margin: 15px 15px 15px 15px;
}


</code>
 
PHP hulp

PHP hulp

28/03/2024 23:58:43
 
- Ariën  -
Beheerder

- Ariën -

28/05/2020 18:04:36
Quote Anchor link
Kan je code-tags gebruiken? HTML werkt hier niet.
 
Jan deman

jan deman

28/05/2020 18:07:16
Quote Anchor link
- Ariën - op 28/05/2020 18:04:36:
Kan je code-tags gebruiken? HTML werkt hier niet.


hoe gebruik je die? ik dacht dat het zo ging: <code></code>
 
Adoptive Solution

Adoptive Solution

28/05/2020 18:27:13
Quote Anchor link
In dit geval een html pagina maken om te zien hoe het eruit ziet.

En dit <div id='img_div'> kan je maar 1 keer gebruiken. Maak er class van.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
74
<style>
.tester{
position:relative;
width:700px;
height:500px;    
}

#img_div{
float:left;
width:200px;
height:200px;
box-shadow: 10px 5px 5px #69624e;
border-radius:5px;
background-color:#b7b3ea;
margin: 15px 15px 15px 15px;    
}

</style>

<div class="tester">
    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>

    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>

    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>
    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>

    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>

    <div id='img_div'>
    <img width='200px' height='150px' src='admin/images-ls/foto.jpg' >
        <p>naam</p>
        <div id='dv_rtfloat'>
            <p>beschrijving</p>
            <td><a href="buy.php?id=id">Buy</a></td>
        </div>
    </div>

</div>


Toevoeging op 28/05/2020 18:37:36:

En 3 naast elkaar als de container 600px breed is en de afbeelding div 200px zal niet lukken.

width:200px;
margin: 15px 15px 15px 15px;

is al gauw 230 * 3 is 690.
Vandaar 700px;
Gewijzigd op 28/05/2020 18:38:41 door Adoptive Solution
 
- SanThe -

- SanThe -

28/05/2020 19:58:19
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.