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>

看看这个小提琴完全正常工作http://jsfiddle.net/0heq8dz3/

如何防止<div>在缩放时重叠？

1 个答案: