定位部分和一邊

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; 這將解決問題。