html - 如何防止 在缩放时重叠？

Question

我并排显示三个 div，它们在正常屏幕尺寸下看起来不错，但在缩放屏幕上，因为 div 缩小了其中的文本，它也缩小了图像似乎被剪切了(图像尺寸在进一步缩放时被剪切)。底线我不希望 div 中的内容在缩放时搞砸，尝试了 overflow: scroll 用于 body 但在缩放时没有出现滚动条.我认为滚动条有助于保持 div 中的内容安全。

jsfiddle this will help you understand

<div id='container' style='width:100%;'>
<div class='left' style='height:20px;width:21%;float:left;border:1px solid black;box-sizing: border-box;height:200px;'>
</div>
<div class='center' style='height:20px;width:56%;float:left;border:1px solid blue;box-sizing: border-box;height:200px;'>
</div>
<div class='right' style='height:20px;width:23%;float:right;border:1px solid red;box-sizing: border-box;height:200px;'>
</div>
</div>

Answer 1

在宽度中使用 % 时要小心，因为边框、边距、填充都计入宽度计算，这可能就是您的代码失败的原因。

要让它工作，你可以使用 box-sizing: border-box;在你的 div 中看看:

<div id='container' style='width:100%;'>
<div class='left' style='width:21%;float:left;box-sizing: border-box;'>
</div>
<div class='center' style='width:56%;display:inline-block;box-sizing: border-box;'>
</div>
<div class='right' style='width:23%;float:right;box-sizing: border-box;'>
</div>
</div>

看看这个完全正常工作的 fiddle http://jsfiddle.net/0heq8dz3/