Question

我正在尝试使用左侧的一些文本和按钮以及右侧的动画图像（它滑过）来创建一个简单的网页。目前一切都像它应该的那样，除非我去重新调整网页大小，背景会流出正确的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 (min-width:960px)

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

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

1 个答案: