css - 缩放失真

Question

我的网站有问题，每次调整缩放都会扭曲页面布局，我不知道我做错了什么，请看一下我的意思：Distorted Normal

Answer 1

试试这个 HTML：

 <div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    </div>

使用 CSS：

.page {
  text-align:center;
  border: 1px solid rgb(0,0,0);
  width:20px;
  height:20px;              
  float: left;
}

.pageHolder{
 overflow: auto;
width: 100%;
}

清除浮动的元素是标记。这就像使用<br>但用于浮动。在语义网中混合标记和内容被认为是不好的做法。

Answer 2

尝试在CSS中为您的布局使用max-width和min-width属性