Plaatsen van 2 div's naast elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Advanced Mendix Developer Order Management Systeme

Advanced Mendix Developer Order Management Systemen (NL) Den Haag HBO/WO IT Professional "Als Advanced Mendix Developer impact maken op de groeiende e-commerce markt? Je doet dit bij PostNL door met je DevOps team onze Mendix applicaties verder te ontwikkelen, waarbij je complexe logistieke business processen vertaalt naar applicaties die ons primaire proces ondersteunen". Wat ga je doen? PostNL wordt een postal tech company We nemen de ontwikkeling van onze IT applicaties in eigen hand door onze eigen software-ontwikkel-capability op te zetten. Als Advanced Mendix Developer ben je onderdeel van een multidisciplinair, agile werkend Business-IT-team. Samen met dit team bouw je onze logistieke IT-applicaties verder

Bekijk vacature »

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

15/06/2021 23:39:04
 
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.