Inkonsistenz in Inline-Block

-2

Ich gemischt div und img bis in eine inline-block, aber das Div ist nicht inline mit den anderen Bildern. Können Sie mir bitte sagen, warum und wie Sie es beheben können?Inkonsistenz in Inline-Block

Mein Code:

.floating-box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 20px; 
 
    border: 3px solid #73AD21; 
 
} 
 
.after-box { 
 
    border: 3px solid red; 
 
}

<h2>The New Way - using inline-block</h2> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="floating-box">Yeah</div> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="after-box">Another box, after the floating boxes...</div>

Quelle

2017-01-29 Teokan Duran Demircan

Ich glaube, Sie werden wahrscheinlich Ihr Problem näher erläutern müssen. – Carcigenicate

@Teemu Das Div ist nicht inline mit den anderen Bildern –

Obwohl der Code nicht funktioniert, sollte die Kommunikation noch funktionieren;). – Teemu

Sie benötigen vertical-align: top; die CSS-Eigenschaft hinzufügen Spitze aller Elemente auszurichten.

Beispiel Snippet:

.floating-box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 20px; 
 
    border: 3px solid #73AD21; 
 
    vertical-align: top; 
 
} 
 
.after-box { 
 
    border: 3px solid red; 
 
}

<h2>The New Way - using inline-block</h2> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="floating-box">Yeah</div> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="after-box">Another box, after the floating boxes...</div>

Lesen Sie mehr über vertical-align Eigenschaft im Detail here

Quelle

2017-01-29 13:29:33

Inkonsistenz in Inline-Block

Antwort

Verwandte Themen