Inline-Block div rechten Rand

Mit diesem Code zu verlieren, erhalte ich zwei div nebeneinander, wie ich will. Außer, der rechte Rand des zweiten Div fehlt. Es scheint ein Größenproblem zu sein, als ob das div nicht in Reichweite wäre ... Wie kann ich das beheben?Inline-Block div rechten Rand

Ich habe versucht, die Margen hinzufügen, nichts funktioniert ...

.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>

Quelle

2016-07-22 JCorriveau

Ich glaube, Sie suchen 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

Die Box-Sizing-Eigenschaft verwendet wird, um das Standard-CSS-Box-Modell zu ändern verwendete Breite zu berechnen und Höhe der Elemente. Es ist möglich, diese Eigenschaft zu verwenden, um das Verhalten von Browsern zu emulieren, die die CSS-Boxmodellspezifikation nicht korrekt unterstützen.

Die Eigenschaften width und height umfassen den Inhalt, das Padding und den Rahmen, nicht aber den Rand.

Quelle

2016-07-22 14:28:16 TTCC

overflow: hidden Entfernen von .Wrapper und rechten Rand Wand zurückkehrt.

die aktualisierte JSFiddle Siehe: https://jsfiddle.net/8x2c4z16/2/

Quelle

2016-07-22 14:21:18

Zusätzlich dies der Grund passiert ist, dass 'border' außerhalb der Elemente erstreckt, anstatt nach innen zu sitzen. – Toby

@Toby richtig, ärgerlich kleiner Bug wirklich. –

Ich würde nicht sagen, dass es ein Fehler ist, das ist, wie es ist wohl zu arbeiten. Er sagte beiden Divs zu 50%, dann sagt er zu 1px Grenze auf beiden Seiten. Es ist ein Versehen. – LifeOfCoding

Sie müssen den Überlauf von Wrapper zu entfernen, diese Grenzen fügen 1px jeweils links und rechts etwas mehr als 100% der Seite, Überlauf schneidet diese ab zu machen.

Beide divs sind 50% plus 1px auf der linken und rechten der beiden, so dass die insgesamt mehr als 100% der Seite und die Wrapper-Überlauf schneidet diese ab.

Quelle

2016-07-22 14:22:02 LifeOfCoding

-2

einfach Ihre Breiten bis 48% für die linke und rechte Klassen gesetzt

Quelle

2016-07-22 14:29:26

Ich glaube nicht, dass es ein guter Weg ist, um es zu beheben, es scheint ein hackischer Weg, um es zu erreichen. – JCorriveau

50% X 2 + 2 Pixel beträgt mehr als 100%, so etwas ändern muss, entweder Behälter hat mehr als 100% sein, oder die Boxen benötigen weniger als 50% sein .. kein Hack, nur sehr grundlegende mathematische –

2% 100px 2px sein können, aber 2% breiter wird nicht 2px sein, einen Blick auf die Antwort akzeptiert, meiner Meinung nach, ist es viel besser – JCorriveau

Inline-Block div rechten Rand

Antwort

Verwandte Themen