0

我正在尝试获取一个简单的网页，其中包含一些文本和左半部分的按钮以及右侧的动画图像（它会滑动）。目前一切正常，除了当我重新调整网页大小时，背景会流过正确的 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;
}

提前感谢您的帮助。

4

1 回答 1

0

我修复了这个我的删除

#wrapper
{
    max-width: 960px;
}

从@media (min-width:960px)

对不起，如果我的问题很难理解，但很难描述。感谢所有阅读它的人，感谢 Miqdad Ali 提供的帮助。

于 2012-11-29T18:01:53.783 回答