面对显示中的问题：内联块属性

Question

我正在尝试使用css display: inline-block;属性并排放置两个div。但我的div是一个在另一个之下。

小提琴的链接： - https://jsfiddle.net/04cc1n8j/

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;
}

Answer 1

inline-block元素之间的空白宽度打破了您的布局。 This article应该有所帮助。