Wie man zwei Divs nebeneinander inline bekommen?

Question

Brauchen Sie Hilfe, zwei divs zu erhalten, um nebeneinander zu richten, eine enthält 2 Bilder, die andere ein Video.

HTML

 <img src="example3.png" alt="CopeLogo" height="200" width="200" class="exlogo" > 
    </div> 
</div> 

CSS

#pics{ 
text-align: center; 
background-color: #194b6f; 
height: 200px; 
width: 500px; 
float: left; 
border-radius: 5px; 
margin-left: 50px; 
border: 2px dashed black;} 

#vid{ 
text-align: center; 
background-color: #194b6f; 
height: 490px; 
width: 660px; 
float: right; 
border-radius: 5px; 
border: 2px dashed black; 
margin-right: 50px;} 

Answer 1

Ich verstehe, aber bitte fügen Sie Ihre Arbeitscodes, um klarer in Ihrer Frage zu sein.

Sie können tatsächlich tun:

HTML

<div class="header"> 
    <div class="pic"> 
    <img src="http://placehold.it/150x150" alt=""> 
    <img src="http://placehold.it/150x150" alt=""> 
    </div> 
    <div class="vid"> 
    <img src="http://placehold.it/400x150" alt=""> 
    </div> 
</div> 

CSS:

.header { 
    display: inline-block; 
    width: 100%; 
    border: 1px solid #ccc; 
} 
.vid { 
    float: right; 
} 
.pic { 
    float: left; 
} 

Arbeits fiddle

Answer 2

float beide Elemente left und es Breiten entsprechend anpassen.

Answer 3

verwenden Sie einfach float:left; für beide, auch können Sie display:inline-block; für beide auch verwenden, wenn Sie nicht float verwenden möchten.

Answer 4

Betrachten Sie es auf diese Weise: jede Entität Verwendung DIVs zu Gruppe, Sie möchten float:left.

Sie möchten die zwei Bilder ausrichten, also legen Sie jedes in ein div, und schweben Sie diese Divs links.

Sie möchten die Box mit den zwei Bildern an der Box mit dem Video ausrichten. Float jeder von denen links.

Wenn Sie float:left (oder rechts) verwenden, wird das floated DIV aus dem HTML "flow" entfernt und hat daher keine Höhe. Daher hat das DIV, das ein floatiertes DIV (oder ein anderes Element) enthält, eine Höhe von Null. Nicht gut. Um das zu beheben, wenden Sie den Clearfix-Hack auf das Eltern-Div auf.

Hier ist eine bessere Erklärung (obwohl es verwendet eine andere Methode den Schwimmer löschen - beide Methoden funktionieren):Customising Insightly HTML contact form (aligned, spaced fields)

/* CSS: */ 
 
body{min-width:650px;min-height:650px;} 
 
#pics{float:left;border-radius:5px;XXXmargin-left:50px;border:2px dashed black;} 
 
#picLeft {float:left;height:200px;width:200px;} 
 
#picRight{float:left;height:200px;width:200px;} 
 
#vid{float:left;height:200px;width:200px;border-radius: 5px;border:2px dashed black;} 
 

 
.clearfix:after{content:"";clear:both;display:block;}

<!-- HTML: --> 
 
<div id="container" class="clearfix"> 
 
    <div id="pics" class="clearfix"> 
 
    <div id="picLeft"> 
 
     <img src="http://placekitten.com/200/200" alt="MyLogo" height="200" width="200" class="mainlogo"> 
 
    </div> 
 
    <div id="picRight"> 
 
     <img src="http://placekitten.com/195/195" alt="CopeLogo" height="200" width="200" class="exlogo" > 
 
    </div> 
 
    </div> 
 
    <div id="vid"> 
 
    <iframe src="https://www.youtube.com/watch?v=8E8xMcXmI9E" width="195"></iframe> 
 
    </div> 
 
</div>

Weitere Referenzen:

CSS-Tricks: Clearfix hack

Another example

Ahmed Alaa ‚s Antwort hat auch einen guten Tipp: display:inline-block ist auch nützlich - +1