设置display:inline-block后div元素仍无法并排显示该如何解决？

• 你的外层父div和内层子div都应用了.change类，该类设置了固定宽度200px，父容器宽度仅200px，完全放不下三个宽度各为200px的子元素，自然会触发自动换行。
• 额外补充：inline-block元素默认自带4px左右的间距，就算宽度计算刚好匹配，也可能因为这个间距导致溢出换行。

方案1：调整类规则，避免父元素继承子元素的宽度限制 #

给内层子元素加专属类标识，区分父子元素的样式规则：

CSS代码 #

/* 仅子元素应用该宽高、行内块规则 */
div.change.item {
  width: 200px;
  height: 200px;
  background-color: green;
  display: inline-block;
  /* 消除inline-block默认自带的间距 */
  margin-right: -4px;
}

div.change.item.one {
  opacity: 0.7;
}

div.change.item.two {
  opacity: 0.5;
}

div.change.item.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}

HTML代码 #

<div class="wrapper">
  <div class="change item one">
    <p>here</p>
  </div>
  <div class="change item two">
    <p>here</p>
  </div>
  <div class="change item three">
    <p>here</p>
  </div>
</div>

方案2：使用Flex布局实现（更推荐） #

不需要额外处理inline-block的间距问题，适配性更强：

CSS代码 #

.wrapper {
  display: flex;
}
div.change {
  width: 200px;
  height: 200px;
  background-color: green;
}

div.change.one {
  opacity: 0.7;
}

div.change.two {
  opacity: 0.5;
}

div.change.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}

HTML代码 #

<div class="wrapper">
  <div class="change one">
    <p>here</p>
  </div>
  <div class="change two">
    <p>here</p>
  </div>
  <div class="change three">
    <p>here</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Mary Ned