內嵌塊不一致

-2

我混合div和img在inline-block中，但div不與其他圖像內聯。你能告訴我爲什麼以及如何解決它？內嵌塊不一致

我的代碼：

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

來源

2017-01-29 Teokan Duran Demircan

vertical-align屬性我想你可能需要更詳細地解釋你的問題。 – Carcigenicate

@Teemu div不與其他圖像內嵌 –

儘管代碼不起作用，但通信仍然可以正常工作; ）。 – Teemu

您需要添加CSS屬性vertical-align: top;調整所有的元素之上。

示例代碼段：

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

閱讀有關詳細here

來源

2017-01-29 13:29:33

內嵌塊不一致

回答

相關問題