css - div 在浏览器调整大小或分辨率更改时与其他重叠

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;
}

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