html - 使用固定的右 td 动态调整左 td 的大小

Question

我正在尝试获得一个简单的网页，其中包含一些文本和左半部分的按钮以及右半部分的动画图像(它会滑过)。目前一切都像预期的那样工作，除了当我重新调整网页大小时，背景从右边的 td 渗出，直到它到达第一个媒体标签。我不确定为什么会发生这种情况，因为右边的 td 是固定宽度，而左边的 td 设置为 100%。我想得到它，以便随着页面大小的增加，左边的 td 变宽，而右边的 td 保持在右边的大小并保持恒定的宽度。

这是代码(抱歉有这么多)

HTML:

<table border="0" cellpadding="0" cellspacing="0">
<tr height = "500px">
    <td width = "100%" style="padding: 0 25px 0 40px">  
        <h1>Header.</h1>
        <p>Text.</p>
        <ul>
            <li>List item.</li>
            <li>List item.</li>
            <li>List item.</li>
        </ul>           
        <a href="url" class="button">buttonText</a> 
        <div class="logo"><img width="35%" style="max-width: 200px" src="../img/logo.png"/></div>           
    </td>
    <td width="550px">
        <div class='image-window'>
            <div id="i_sliding_image" class="img sliding-image" ><img src="../img/img-slide.jpg"/></div>
            <div id="img-bubble1" class='img img-bubble hide'><img src="../img/img-bubble1.gif"/></div>
            <div id="img-bubble2" class='img img-bubble hide'><img src="../img/img-bubble2.gif"/></div>             
        </div>
    </td>
</tr>
</table>

CSS:

div#wrapper
{
    min-width: 960px;
    min-height: 500px;      
    color: #fff;        
}

h1
{
    width: 100%;        
    font-size: 40px;
    color: #ffffff;     
    padding: 0 0 28px 0;
    line-height: 1.1em;
    margin: 0;
}

p
{       
    padding: 0 0 1em 0;
    margin: 0;
    color: #ffffff;
    font-size: 16px;        
    width: 100%;
}

ul
{
    padding: 0 0 0 20px;
    margin: 0 0 50px 0;
    list-style-type: square;
    list-style-position: outside;
    color: #ffffff;
    font-size: 16px;        
}

a.button
{
    margin: 0px 0 0px 0;        
    font-size: 13px;        
    color: #0072C6;
    padding: 7px 19px 10px 19px;
    background: #fff;
    position: absolute;
}

@media (min-width:960px)
{
    #wrapper
    {
        max-width: 960px;
    }
    p, a, ul
    {
        font-size: 16px;
    }
    h1
    {
        font-size: 40px;
    }
    a.button
    {
        font-size: 13px;
    }
}
@media (min-width:1200px)
{
    #wrapper
    {
        max-width: 1200px;
    }
    p,a,ul
    {
        font-size: 18px;
    }
    h1
    {
        font-size: 42px;
    }
    a.button
    {
        font-size: 14px;
    }
}
@media (min-width:1600px)
{
    #wrapper
    {
        max-width: 1400px;
    }
    p,a,ul
    {
        font-size: 20px;
    }
    h1
    {
        font-size: 44px;
    }
    a.button
    {
        font-size: 15px;
    }
}

.image-window
{
    width: 550px;
    height: 500px;
    float: left;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#img-bubble1, #img-bubble2
{
    position: absolute;
    z-index: -1;
}

.img-bubble
{
    width: 206px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;   
}
.sliding-image
{
    width: 888px;
    height: 500px;
    position: absolute;
    size: auto;
}

在此先感谢您的帮助。

Answer 1

我修复了我的删除

#wrapper
{
    max-width: 960px;
}  

来自@media(最小宽度:960px)

如果我的问题很难理解，但很难描述，我很抱歉。感谢所有阅读它的人，也感谢 Miqdad Ali 的帮助。