如何防止inline-block元素堆叠？

Question

我有两个div元素（divA和divB）。我使用display:inline-block属性将它们放在一起。每个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。使用这种方法，divA（一个40px x 40px的正方形）将保持在左侧，而divB（一个矩形div）将保持在右侧。 divB的宽度将根据屏幕的宽度增加或减少，并且无论屏幕变得多小，该div都将保持在divA的右侧。

您可以更改divA的尺寸，只要调整divB的宽度即可：

width: calc(100% - 60px);

- Jason

Answer 1

演示

Flexbox总是能解决问题。

css

.container{

  display: flex;
}

.a{
  background-color: pink; 
  flex-grow: 1;

}

.b{
  background-color: green;
  width: 85%;
}

html

<div class='container'>

   <div class="a">a</div>
   <div class="b">b</div>

</div>

- Louie Almeda

Answer 2

尝试这个

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的宽度，基于(100%宽度-40px divA宽度-15px margin-right)。然后将它们左浮以消除空隙(在inline-block元素之间)。

- Sherlocked Nguyen

---

这是我为自己的项目找到的解决方案： .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，它似乎可以工作。 - Jason

嗨，Jason，你可以在这里查看我的plnkr以获取你的解决方案。它可以工作，但是divA和divB之间有5像素的间隙。所以如果这是你想要的东西，那就没问题了。 - Sherlocked Nguyen

Answer 3

由于div没有父容器，width:auto被渲染为0px，因此首先您需要给它一个高度。其次，由于您的元素是内联的，请确保div相互接触，以便它们之间没有空白：

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

https://jsfiddle.net/1fpv0t00/

- symlink