Ich muss 2 divs Seite an Seite positionieren, als ob sie als ein einziges div

Question

Ich habe einen pinkfarbenen Container und in ihm gibt es 2 divs, rot und grün nebeneinander mit Display platziert: Inline-Block; Regel in css.i müssen beide divs zu 50% Breite nehmen, so dass sie als ein einzelnes div.but erscheinen, aber wenn ich die Breite auf 50% der grünen Sprünge unter red div.wenn ich Breite auf 49% gesetzt, springt es zu gleichen Linie, aber es gibt Lücken dazwischen, was ich nicht will, einige Körperhilfe.

ich brauche sie, um in einer Linie zu bleiben, als ob sie als ein einzelnes div erscheinen. ich werde meinen Code Stift Link hier setzen ... http://codepen.io/ShamZ/pen/gLXBow HTML

<div class="container"> 
    <div class="box"> 
    </div> 
    <div class="box2"> 
    </div> 
</div> 

css

.container{ 
width:800px; 
height:800px; 
background-color:pink; 
} 
.box{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:red; 
} 
.box2{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:green; 
} 

Answer 1

Das Problem mit unserem Code ist, dass HTML Whitespace zwischen den Boxelementen im Container erkennt - und daher scheint es, als ob im Container für 2 Divs mit 50% Breite nicht genug Platz ist. - Setzen Sie sie auf 48% oder noch kleiner und Sie sehen, dass sie in eine Zeile passen.

Eine Lösung kann sein:

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    display:inline-block; 
 
font-size: 0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>

und stellen Sie dann eine andere Schriftgröße in untergeordneten Elemente

Answer 2

Dies ist ein bekanntes Problem, bei dem Leerraum zwischen inline-block Elementen Ursache Margen zu erscheinen. Werfen Sie einen Blick auf dieses Beispiel (fest)

.container{ 
 
width:800px; 
 
height:800px; 
 
background-color:pink; 
 
} 
 
.box{ 
 
display:inline-block; 
 
width:50%; 
 
height:50px; 
 
background-color:red; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box:nth-of-type(2) { 
 
    background-color: green; 
 
    }

<div class="container"> 
 
    <div class="box"> 
 
    </div><div class="box"> 
 
    </div> 
 
</div>

Answer 3

Schalter zu Schwimmern, ala http://codepen.io/davewallace/pen/aBVQLN

inline-block kann in ungeraden Abständen führen, dass weitere Abhilfen benötigen.

Wenn Sie Floats verwenden, können Sie einfach den gewünschten Effekt erzielen. Unter Umständen müssen Sie die Verwendung von 'clearfix' auf Containern untersuchen, die Ihre schwebenden Elemente umhüllen.

Answer 4

hinzufügen font-size:0 Mutterelement .container

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    font-size:0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>