Question

我有两个div（divA和divB）。我正在使用display：inline-block来并排放置它们。每个div都有一个宽度百分比。问题是我的布局是响应式的，我尝试使用浮动，但它打破了我的布局。在较小的屏幕上，2个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内联？我没有尝试任何工作。

感谢您的帮助。

*** EDIT

这是解决方案：

.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 square）将保留在左侧，而divB（矩形div）将保留在右侧。 divB的宽度将根据屏幕的宽度增加或减少，无论屏幕变小多小，div都将保留在divA的右侧。

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

width: calc(100% - 60px);

Answer 1

试试这个

plnkr

createdBy: {
    type: String,
    autoValue: function () {
        return Meteor.userId();
    },
    denyUpdate: true,
    optional: true
}

我使用calc来计算divB的宽度（100％宽度 - divP的宽度为40px - 15px margin-right）。然后浮动它们以移除空间（在内联块元素之间）

Answer 2

DEMO

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>

Answer 3

由于div没有父容器，width:auto呈现为0px，因此首先必须给它一个高度。其次，由于你的元素是内联的，请确保div触摸，以便它们之间没有空格：

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

https://jsfiddle.net/1fpv0t00/

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

3 个答案: