在顯示器面臨的問題：內聯塊屬性

我想把兩個div並排使用css display: inline-block;屬性。但我的div被放置在另一個之下。小提琴的在顯示器面臨的問題：內聯塊屬性

HTML

<div class='outerDiv'> 
    <div class='innerDiv1'></div> 
    <div class='innerDiv2'></div> 
</div>

CSS

.outerDiv{ 
    width:300px; 
    height:200px; 
    margin:0px; 
    padding:0px; 
} 
.innerDiv1{ 
    width:100px; 
    height:200px; 
    display:inline-block; 
    background-color:red; 
    margin:0px; 
    padding:0px; 
} 

.innerDiv2{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    background-color:green; 
    margin:0px; 
    padding:0px; 
}

來源

2016-07-14 Ritesh Choudhary

[更新的小提琴]（https://jsfiddle.net/chipChocolate/04cc1n8j/4/） –

幾個解決方案。這裏是一個：刪除HTML中的空格：https：//jsfiddle.net/04cc1n8j/5/ ...參見其他方法和解釋。 –

嘗試將它們浮動，然後在父元素上聲明'overflow：auto'來清除'float'。或者將'margin-right：-4px;'應用於'.innerDiv1'。 – UncaughtTypeError

的inline-block元素之間的空白的寬度是打破你的佈局。 This article應該有所幫助。

來源

2016-07-14 21:22:48

感謝伊藤，這篇文章真的很有幫助。 –

在顯示器面臨的問題：內聯塊屬性

回答

相關問題