Question

我有我的asp.net页面生成的html。它看起来不错但是当我改变缩小浏览器大小的屏幕分辨率时，logoplace div中的图像会出现/重叠。似乎绝对定位问题companyviewdiv

<div id="content">
    <div class="main">
    <table>
        <tr>
            <td valign="top" class="Mid_row">
                <div class="indent">                            
                    <div class="logoPlace">
                        <img width="200" height="172" border="0" src="images/aldagi.jpg">
                    </div>  
                    <div class="comapanyView">
                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
                            <tbody><tr>
                                <td colspan="2">
                                    <h1>heading</h1>
                                </td>
                            </tr></tbody>
                        </table>
                    </div>
            </td>
        </tr>   
    </table>
    </div>      
</div>

和相关的css类是：

.main {
    margin: 0 auto;
    max-width: 1200px;
    min-width: 997px;
    padding-left: 6px;
    text-align: left;
}

#content {
    background: url(/images/bg.gif) top left repeat-x #fff;
    overflow: hidden;
    padding-bottom: 20px;
}

.Mid_row {
    padding-right: 15px;
}

#content .indent {
    padding: 15px 0 0;
}

.logoPlace {
    margin-right: 20px;
    margin-top: 50px;
    position: absolute;
    right: 0;
    width: 15%;
}

.comapanyView {
    position: relative;
    width: 80%;
}

Answer 1

你必须对绝对定位非常小心，但在这种情况下这不是一个真正的问题。问题是由徽标div上的％宽度引起的，因此我建议您删除/重新考虑：

.logoPlace {
    width: 15%; /*  REMOVE THIS */
}

编辑：使文本环绕徽标的一个选项可能是将整个徽标div移动到DescribRow div中，如下所示：

<div class="DescribRow">
    <div class="logoPlace">
    <img border="0" src="images/aldagi.jpg" width="200" height="172">
    </div>

删除旧的logoPlace样式并将其替换为：

.logoPlace {
    float: right;
    margin: -110px -20px 0 0;
}

定位可能需要一些调整，但它可能会有所帮助。

div重叠其他浏览器调整大小或分辨率更改

1 个答案: