定位部分和一邊

嘿，所以我有一點難以放在一邊，部分正確定位時，屏幕變小。縮小屏幕時，會發生什麼情況會導致節落在旁邊。在這裏，筆：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; 
}

來源

2017-08-24 Benas Lengvinas

在{{從20px改爲2％}部分{}中將margin-right更改爲 –

使用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>

來源

2017-08-24 09:08:20 Chiller

哇，它有效，但是您能解釋原因嗎？：D –

@ BenasLengvinas保證金右邊的固定寬度使得它不包含在百分比值中，並且可以使整個百分比（除了+部分+保證金）超過100％，並且導致該部分破裂的原因 – Chiller

我想通了另一種做法是（https://codepen.io/anon/pen/gxjbyg）。你會說哪種解決方案更好？ –

Here拋開內因的導致整體寬度增加超過100％。將此減至margin-right: 15px;這將解決問題。

來源

2017-08-24 09:09:38 kmg

定位部分和一邊

回答

相關問題