html - 定位部分和旁边

Question

嘿，所以在缩小屏幕时，我很难正确放置一边和部分。缩小屏幕时，该部分会下降到旁边。这里的笔: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); 一个部分来考虑你在 aside 上使用的 margin-right > 即 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>