Question

当我在我的浏览器Chrome缩小时，info_table向下移动。为什么这样做？此外，当overflow: auto;添加到section时，它也会移动。我该怎么办？

CSS

*{  
    font-size:100%;
    margin: 0px;
    padding: 0px;
} 

body{
    width: 100%;
}

#info_table{
    float: left;
    width: 480px;
    margin: 40px 0px 0px 16px;
    border-spacing: 0px 0px;
}

#left{
    float:left;
    margin: 60px 0px;
}

#photo{
    float: left;
    width: 176px;
    height: 176px;
    border: 1px solid black;
}

#section{
    margin: 160px auto 0px;
    width: 675.2px;
    height: 320px;
    #overflow: auto;
    #border:1px solid black;
}

#choosephoto{
    width: 64px;
}

#submitwords{
    width: 72px;
    height: 28px;
    margin-left: 104px;
    #border:1px solid purple;
}


#wrapper{
    display: block;
    box-shadow: 3px 10px 5px #888888;
    margin: 0px auto;
    margin-top: 48px;
    width: 1024px;
    height: 960px;
    overflow: auto;
    background:white;
}

HTML

 <div id="section">
            <body>
            </body>
            <form>
                <div id="left">
                    <div id="photo">

                    </div>
                    <br/>
                    <input type="file" id="choosephoto" name="uploadphoto"/>
                </div>
                <table id="info_table">
                    <tr>
                        <td>Name:</td> 
                    </tr>
                    <tr>
                        <td><input/></td>
                    </tr>
                    <tr>
                        <td>Info:</td> 
                    </tr>
                    <tr>
                        <td><textarea></textarea></td>
                    </tr>
                    <tr>
                        <td><button type="submit" id="submitwords">Update</button></td>
                    </tr>
                </table>
            </form>
        </div>

Answer 1

这是因为width的{{1}}设置得过宽，不适合info_table section。

例如，减少width中的宽度可以缓解这种情况。因此，您可以尝试使用以下内容替换它。

info_table

话虽如此，最好还是阅读使用网格系统（如960.gs）。

Answer 2

至于发生了什么：浏览器似乎通过更改#photo上边框的宽度来补偿缩放级别。

67％放大：

enter image description here

50％放大：

enter image description here

至于如何修复它？除非能够像这样缩放是非常需要的，否则我不会担心它，因为确保所有内容都能正确扩展需要做很多工作。

Answer 3

为什么你的身体标签？你的代码很乱，我为你重新编写代码here

为什么在浏览器缩小时div会移动？

3 个答案: