Inline zwei divs nebeneinander - CSS

Question

Ich versuche, zwei divs mit einer Breite von jeweils 50% zu platzieren, aber irgendwie ist es nicht in der gleichen Zeile, aber wenn ich 49% tun stapelt es in der gleichen Zeile. Kann mir bitte jemand sagen, was ich falsch mache mit dem Code (mehr interessiert, die Ursache zu kennen als Lösung).

CSS -

* { 
    padding: 0; 
    margin: 0; 
} 
.wrapper { 
    width: 100%; 
} 

.left-c { 
    width: 50%; 
    background: #3EF00C; 
    display: inline-block; 
} 

.right-c { 
    width: 50%; 
    background: #2E4E6E; 
    display: inline-block; 
} 

HTML -

<div class="wrapper"> 
    <div class="left-c"> 
     <p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p> 
    </div> 
    <div class="right-c"> 
     <p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p> 
    </div> 
</div> 

JS Fiddle - https://jsfiddle.net/no0chhty/1/

Answer 1

Dies ist ein klassisches Problem mit Elementen des Typs inline-block. Leider berücksichtigen sie den Dokument-Leerraum, einschließlich Leerzeichen. Dafür gibt es mehrere Lösungen, aber die, die ich verwenden möchte, setzen das Elternelement auf font-size: 0 und dann die Schriftgröße der Inline-Blöcke auf den gewünschten Wert zurück.

mehr das Lesen Sie hier: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

float hinzufügen: left; die Klasse "links c" check out

.left-c { 
      width: 50%; 
      background: #3EF00C; 
      display: inline-block; 
     float:left; 
     } 

Bitte geben Sie die FIDDLE

Answer 3

diese CSS ersetzen

* { 
    padding: 0; 
    margin: 0; 
} 
    .wrapper { 
    width: 100%; 
    display:flex 
    } 

    .left-c { 
    width: 50%; 
    background: #3EF00C; 
    } 

    .right-c { 
    width: 50%; 
    background: #2E4E6E; 
    } 

Answer 4

hallo statt Inline-Block können Sie Sie schwimmen oder biegen wie folgt aus: Link hier https://jsfiddle.net/JentiDabhi/r9s3z07e/

CSS

.left-c { 
    background: #3ef00c none repeat scroll 0 0; 
    float: left; 
    width: 50%; 
} 

Answer 5

<div class="wrapper"> 
    <div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div> 
</div> 

Putting Kommentar zwischen schließenden Tag von links-c und öffnenden Tag von rechts-c wird das Problem lösen.

Example

Answer 6

ändern display: inline-block zu display: table-cell für beide Abschnitte in etwa so:

.left-c { 
    width: 50%; 
    background: #3EF00C; 
    display: table-cell; 
} 

.right-c { 
    width: 50%; 
    /* 49% works well */ 
    background: #2E4E6E; 
    display: table-cell; 
} 

Here is the JSFiddle demo