定位部分和旁边

Question

Heyo，所以在制作屏幕较小时，我有点困难，并且要正确定位。当收缩屏幕时，该部分会在旁边下降。这笔笔：https://codepen.io/anon/pen/gxjbyg

以下是代码：

#container {
width:90%;
margin: 0 auto;
background:pink;
height:300px;
}
aside {
width:12%;
height:100px;
background:green;
border-radius:20px;
display:inline-block;
margin-right:20px;
}
section {
width:86%;
height:100px;
background:purple;
border-radius:20px;
display:inline-block;
}

Answer 1

使用width:calc(86% - 20px);一部分来考虑您在margin-right aside上使用的20px;

#container {
  width:90%;
  margin: 0 auto;
  background:pink;
  height:300px;
}
aside {
  width:12%;
  height:100px;
  background:green;
  border-radius:20px;
  display:inline-block;
  margin-right:20px;
}
section {
  width:calc(86% - 20px);
  height:100px;
  background:purple;
  border-radius:20px;
  display:inline-block;
}

<div id="container">
  <aside>ASIDE</aside>
  <section>SECTION</section>
</div> 

Answer 2

此处margin-right: 20px;抛弃导致整体宽度增加到100％以上。将其减少到margin-right: 15px;，这将解决问题。