我有两个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);