Plaatsen van 2 div's naast elkaar
Met de volgende code staan ze wel een soort van naast elkaar, alleen zit er een witte spleet tussen en onder de div's ook nog.
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left, .right {
width: calc(50% - 2px);
height: 100%;
display: inline-block;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left, .right {
width: calc(50% - 2px);
height: 100%;
display: inline-block;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<body>
<div class="left">
</div><div class="right">
</div>
</body>
<div class="left">
</div><div class="right">
</div>
</body>
O kijk, elke vraag is al gesteld: https://stackoverflow.com/questions/9555240/delete-white-space-between-divs
Gewijzigd op 07/02/2020 20:31:29 door Rob Doemaarwat
Ben je bekend met de zogenaamde "developer consoles" die nagenoeg elke moderne browser heeft?
Deze zijn meestal bereikbaar via de F12-functietoets.
Hierin zit ook een zogenaamde (element) inspector die bij uitstek geschikt is voor dit soort (visuele) quirks. Het stelt je in staat om on-the-fly elementen en stijlregels te inspecteren en real time aan te passen om te zien wat het effect hiervan is.
Als je je nog nooit hierin verdiept hebt loont het de moeite om hier eens een kijkje te nemen.