html - 如何防止内联块元素堆叠？

我有两个div（divA和divB）。我使用display:inline块将它们并排放置。每个div都有一个宽度百分比。问题是我的布局是响应的，我尝试过使用float，但它破坏了我的布局。在较小的屏幕上，两个div不是内联的，DivB在DivA下面移动。

.divA {
background-color:#CCC;
height:40px;
width:40px;
display:inline-block;
vertical-align:top;
margin-right:15px;
}

.divB {
background-color:#0FF;
height:auto;
width:85%;
display:inline-block;
vertical-align:top;
}



<div class="divA"></div>
<div class="divB"></div>

如何使divB的宽度自动调整到屏幕的宽度，并与divA保持一致？我所做的一切都不管用。
谢谢你的帮助。
***编辑
这就是解决方案：

.container {
height:100%;
width:auto;
padding-top: 15px;
padding-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}

.divA {
background-color:#CCC;
height:40px; width:40px;
display:inline-block;
vertical-align:top;
margin-right:15px;
}

.divB {
background-color:#0FF;
height:100%;
width: calc(100% - 60px);
display:inline-block;
vertical-align:top;
}

如果您使用的是响应式设计，则此方法是完美的，因为您不必浮动div。使用这种方法，div a（40px×40px正方形）将保持在左侧，而divB（矩形div）将保持在右侧。divB的宽度将根据屏幕的宽度增加或减少，并且div将保持在divA的右侧，无论屏幕变得多么小。
只要调整divB的宽度，就可以更改divA的尺寸：

width: calc(100% - 60px);

最佳答案

试试这个
plnkr

.divA {
  background-color:#CCC;
  height:40px;
  width:40px;
  display:inline-block;
  vertical-align:top;
  margin-right:15px;
  float: left;
}

.divB {
  background-color:#0FF;
  height:40px;
  width: calc(100% - 55px);
  display:inline-block;
  vertical-align:top;
  float:left;
}

我使用calc计算divB的宽度（divA的100%宽度-40px宽度-15px右边距）。然后向左浮动以移除空间（内联块元素之间）

关于html - 如何防止内联块元素堆叠？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35544940/