Question

我将div的宽度设置为＆＃39; auto＆＃39;。当我刷新页面时，div的宽度非常宽，远离我的屏幕。我不能为这个div设置一个明确的宽度，因为我必须满足不同的屏幕尺寸。

知道为什么会这样吗？

编辑＆gt;我的代码按要求提供：

CSS：

.table{
max-width: 100%;
height: 250px;
background-color: #ffffff;
border: 2px solid #ccc;
overflow: auto;
white-space: nowrap;
margin-top: 20px;   
}

HTML：

<div class="table" id="MedeLogSearchTable"></div>

Answer 1

width:auto是div宽度的默认值，您要做的是添加百分比值。

Answer 2

如果div的宽度超出屏幕width: auto（这是默认值），则可能意味着div的父比屏幕宽。< / p>

Answer 3

尝试将父标记像父标记position:relative或position:absolute一样，并尝试将最后一个div指定为相对位置。还可以使用除Explorer之外的其他浏览器测试页面。例如Firefox，Chrome或Safari。如果可能，使用Firebug扩展程序调试代码，该扩展程序存在于Firefox，Chrome和IE的插件市场中。

尝试

简单结构示例：

<div id="container">
    <div id="leftmenu">LEFT</div>
    <div id="content">
        <div class="table" id="MedeLogSearchTable">
            <table width="100%" border="1">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </div>
</div>

和CSS：

#container {
    max-width: 1600px;/* a max-width may be desirable to keep this layout
        from getting too wide on a large monitor. */
    min-width: 600px;/* a min-width may be desirable to keep this layout
        from getting too narrow.  */
    background: #FFF;
}

#leftmenu {
    float: left;
    width: 20%;
}
#content {
    width: 80%;
    float: left;
}

.table {
        width: 100% ;
        max-width: 100%;
        height: 250px;
        background-color: #ffffff;
        border: 2px solid #ccc;
        overflow: auto;
        white-space: nowrap;
        margin-top: 20px;   
}

CSS宽度：自动表现奇怪

3 个答案: