div en ligne perd la frontière droite

En utilisant ce code, je reçois deux div côte à côte comme je le veux. Sauf, la bordure droite de la deuxième div est manquante. Cela ressemble à un problème de taille, comme si le div était hors de portée ... Comment puis-je résoudre ce problème?div en ligne perd la frontière droite

J'ai essayé d'ajouter des marges, rien ne fonctionne ...

.wrapper { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
    
 
.left { 
 
    width: 50%; 
 
    height:10px; 
 
    border: 1px solid; 
 
    display: inline-block;  
 
} 
 

 
.right { 
 
    width: 50%; 
 
    height:10px; 
 
    border:1px solid; 
 
    display: inline-block; 
 
    margin-left: -1px; 
 
}

<body style="margin-right: 50px"> 
 
    <div class="wrapper"> 
 
    <div class="left"></div><div class="right"></div> 
 
    </div> 
 
</body>

Source

2016-07-22 JCorriveau

Je pense que vous cherchez box-sizing:border-box;

.wrapper { 
 
     width: 100%; 
 
     white-space: nowrap; 
 
     overflow: hidden; 
 
    } 
 
    
 
    .left { 
 
     width: 50%; 
 
     height:10px; 
 
     border: 1px solid; 
 
     display: inline-block; 
 
     box-sizing:border-box; 
 
     border-right-width :0 
 
    } 
 
    .right { 
 
     width: 50%; 
 
     height:10px; 
 
     border:1px solid; 
 
     display: inline-block; 
 
     box-sizing:border-box; 
 
    }

<div class="wrapper"> 
 
     <div class="left"></div><div class="right"></div> 
 
     </div>

box-sizing reference

La propriété box-sizing est utilisé pour modifier le modèle de boîte CSS par défaut utilisé pour calculer la largeur et hauteur des éléments. Il est possible d'utiliser cette propriété pour émuler le comportement des navigateurs qui ne prennent pas correctement en charge la spécification du modèle de boîte CSS.

Les propriétés width et height incluent le contenu, le remplissage et la bordure, mais pas la marge.

Source

2016-07-22 14:28:16 TTCC

Retirez overflow: hidden de .Wrapper et vos déclarations de mur de bordure droite.

Voir la jsFiddle mise à jour: https://jsfiddle.net/8x2c4z16/2/

Source

2016-07-22 14:21:18

De plus, la raison pour laquelle cela se produit est que 'border' s'étend en dehors des éléments plutôt que de rester assis à l'intérieur. – Toby

@Toby correct, petit bug ennuyeux vraiment. –

Je ne dirais pas que c'est un bug, c'est comme ça que ça se passe. Il a dit aux deux divs d'être à 50%, puis lui dit d'avoir 1px frontière des deux côtés. C'est un oubli. – LifeOfCoding

Vous devez retirer le trop-plein de son emballage, ces frontières ajoute 1px chaque gauche et à droite ce qui en fait un peu plus de 100% de la page, les coupures de débordement ceci.

Les deux divs sont 50% plus 1px à gauche et à droite des deux, ce qui fait le total de plus de 100% de la page, et le débordement de l'encapsulation coupe ceci.

Source

2016-07-22 14:22:02 LifeOfCoding

-2

Il suffit de définir vos largeurs à 48% pour la gauche et les classes droite

Source

2016-07-22 14:29:26

Je ne pense pas que ce soit un bon moyen de le réparer, il semble que ce soit une façon hackish d'y arriver. – JCorriveau

50% X 2 + 2 pixels est plus de 100%, donc quelque chose doit changer, soit le conteneur doit être supérieur à 100%, ou les boîtes doivent être inférieures à 50% .. pas un hack, juste des mathématiques extrêmement basiques –

2% de 100px peut être 2px, mais 2% de plus ne sera pas 2px, jetez un oeil à la réponse acceptée, à mon avis, c'est beaucoup mieux – JCorriveau

div en ligne perd la frontière droite

Répondre

Questions connexes