hulp nodig met aligne/ordenen van mysql data in een div
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)
1
2
3
4
5
6
7
8
9
10
11
12
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>";
}
?>
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>
- 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>
En dit <div id='img_div'> kan je maar 1 keer gebruiken. Maak er class van.
Code (php)
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
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>
.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
