在显示器面临的问题：内联块属性

我想把两个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

感谢伊藤，这篇文章真的很有帮助。 –

在显示器面临的问题：内联块属性

回答

相关问题