定位部分和一边

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); 一是考虑您在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> 

Answer 2

在这里margin-right: 20px; 顺便说一句，导致整体宽度增加到100％以上。 减少到margin-right: 15px; 这将解决问题。