Plaatsen van 2 div's naast elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

07/02/2020 19:51:11
Quote Anchor link
Heb een klein css probleempje, ik krijg het niet voor elkaar om 2 div's normaal naast elkaar te krijgen. ik gebruik bij allebei een breedte van 50% wat omgezet word naar pixels achteraf, ik denk alleen dat ik op oneven waardes uitkom door getallen achter de komma waardoor ze onder elkaar komen.
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)
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
<!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>
 
PHP hulp

PHP hulp

12/07/2020 01:03:05
 
Rob Doemaarwat

Rob Doemaarwat

07/02/2020 20:26:34
Quote Anchor link
Die witte streep die je ziet is de "witruimte" (regeleinde+spaties) tussen de twee div's. Op deze manier werkt het wel zoals je verwacht:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<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
 
Jorn Reed

Jorn Reed

08/02/2020 02:29:33
Quote Anchor link
Ik had die oplossing ook gevonden, inclusief het gebruik maken van `float` of `font-size: 0` etc. Vond het alleen een beetje slordige oplossingen. Ik ben zelf een beetje gaan kijken naar CSS Grid en Flexbox. Ik dacht alleen dat ik het in het verleden een keer opgelost had zonder die iet wat slordige oplossingen en zonder Grid en Flexbox, maar dat is alweer zolang terug dat ik dat niet meer weet/kan terug vinden.
 
Thomas van den Heuvel

Thomas van den Heuvel

08/02/2020 20:09:15
Quote Anchor link
@Jorn, dit is voornamelijk een visueel vraagstuk.

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.
 



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.