0

当我在浏览器 Chrome 上拉远时，它info_table会向下移动。为什么这样做？此外，当添加overflow: auto;到时section，它也会移动。我能做些什么？

jsfiddle http://jsfiddle.net/PbwS8/3/

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>
4

3 回答 3

1

这是因为widthforinfo_table设置得太宽了section width。

例如，减小宽度 ininfo_table会缓解这种情况。因此，您可以尝试将其替换为以下内容。

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

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

于 2013-06-18T20:20:10.223 回答
1

至于发生了什么：似乎浏览器正在通过更改#photo.

67% 缩放：

在此处输入图像描述

50% 缩放：

在此处输入图像描述

至于怎么修？除非急需能够像这样缩放，否则我不会担心它，因为确保一切都正确缩放需要做很多工作。

于 2013-06-18T20:25:35.860 回答
0

为什么你里面有一个body标签？你的代码很乱，我在这里为你重新编写

于 2013-06-18T20:24:39.230 回答