0

现在已解决并更新。主要问题是css冲突。

我已经制作了一个显示图像的表格，并且中心 div 中的图像会根据鼠标输入与 JQ 发生变化，但我似乎无法让图像适合主单元格。

期望的结果是每个图像都出现在中心，它应该完全适合空间，但我注意到当使用固定像素大小时，浏览器兼容性存在问题，并且布局会有所不同。当我尝试使用百分比时，它似乎又没有按预期工作。

我尝试过使用 css % 和固定像素 h/w，但都没有按预期工作。

我是否以不正确的方式接近预期的结果？

所有建议表示赞赏，谢谢！

http://www.digitalterrorrecords.com/home/featureTable.php << 以下代码示例

html

<div>
    <table> 
    <tr>

    <td>
    <? // Stacked Left BEGIN ?>
    <table class=''>

        <tr>
            <td class='smallbox'><a href='#lf_1' class="contact"><img class='small_feat' src='<? echo $ft_img_1 ;?>'></img></a></td> <!-- Artwork  1   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_2' class="contact"><img class='small_feat' src='<? echo $ft_img_2 ;?>'></img></a></td> <!-- Artwork  2   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_3'  class="contact"><img class='small_feat' src='<? echo $ft_img_3 ;?>'></img></a></td> <!-- Artwork  3   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_4'  class="contact"><img class='small_feat' src='<? echo $ft_img_4 ;?>'></img></a></td> <!-- Artwork  4   -->
        </tr>

    </table>
    <? // Stacked Left END ?>
    </td>



    <td>
    <? // Main feature BEGIN ?>
    <table>
        <tr> 
            <td class='mainbox'>
            <div>

                        <!--
                        <div> <? // LOAD BACKGROUND ?>
                        <img src='<? echo $ft_img_bg ;?>'></img>
                        </div>
                        -->

                        <div id='lf_1' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_1 ;?>'></img>
                        </div>

                        <div id='lf_2' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_2 ;?>'></img>
                        </div>

                        <div id='lf_3' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_3 ;?>'></img>
                        </div>

                        <div id='lf_4' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_4 ;?>'></img>
                        </div>

                        <div id='lf_5' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_5 ;?>'></img>
                        </div>

                        <div id='lf_6' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_6 ;?>'></img>
                        </div>

                        <div id='lf_7' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_7 ;?>'></img>
                        </div>

                        <div id='lf_8' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_8 ;?>'></img>
                        </div>
                `</div>
            </td>
        </tr> 
    </table>
    <? // Main feature END?>
    </td> 

    <? // Stacked Right BEGIN ?>
    <td>

    <table>

        <tr>
            <td class='smallbox'><a href='#lf_5' class="contact"><img class='small_feat' src='<? echo $ft_img_5 ;?>'></img></a></td> <!-- Artwork  5   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_6' class="contact"><img class='small_feat' src='<? echo $ft_img_6 ;?>'></img></a></td> <!-- Artwork  6   -->

        <tr>
            <td class='smallbox'><a href='#lf_7' class="contact"><img class='small_feat' src='<? echo $ft_img_7 ;?>'></img></a></td> <!-- Artwork  7   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_8' class="contact"><img class='small_feat' src='<? echo $ft_img_8 ;?>'></img></a></td> <!-- Artwork  8   -->
        </tr>

    </table>
    </td><? // Stacked Right END?>

    </tr>
    </table>
</div>

的CSS

td div {

    height: 100%;
}

.small_feat {
        width: 200px;
        height: 200px;

        border: solid 2px #ffffff;

}

.large_feat { 

        width: 800px;
    height: 800px;

}

a.selected {
    background-color:#1F75CC;
    color:white;
    z-index:100;
}

.messagepop {
    background-color:#FFFFFF;
    cursor:default;
    display:none;
    position:absolute;
    z-index:50;

}

.smallbox {
        width: 200px;
        height: 200px;
}

JQ

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        width: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $('.contact').each(function(index, l) {
            var $pane = $($(l).attr('href'));
            if ($pane.is(':visible')) {
                $pane.slideFadeToggle();
            }
        });
        $('.contact').removeClass('selected');
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle();
    }

    function deselect($link) {
        $($link.attr('href')).slideFadeToggle(function () {
            $link.removeClass('selected');
        });
    }

    $('.contact').mouseenter(function () {
        var $link = $(this);
        if ($link.hasClass('selected')) {
            deselect($link);
        } else {
            select($link);
        }
        return false;
    });

    $('.close').live('click', function () {
        deselect();
        return false;
    });
});
4

4 回答 4

1

这可能是最后一个可能的答案......看看这个！

.messagepop {
      background-color:#FFFFFF;
      cursor:default;
      display:none;
      position:relative;
      z-index:50;
      width:100%;

    }
于 2013-05-30T15:56:38.657 回答
0

看一下这个。如前所述，位置：绝对是问题所在。

.messagepop {
      background-color:#FFFFFF;
      cursor:default;
      display:none;
      position:relative;
      z-index:50;
    width:100%;

    }
于 2013-05-30T16:10:19.967 回答
0

要解决您的样式问题，请从 CSS 中的 messagepop 类中删除绝对定位样式。当您使用绝对定位时，它会将元素从页面的自然流中取出，并且不再尊重父元素的高度和宽度约束。

.messagepop {
    background-color:#FFFFFF;
    cursor:default;
    display:none;
    z-index:50;
}
于 2013-05-30T16:02:55.533 回答
0

我查看了您的页面源代码，您有

.large_feat 
{
width: 100%;
}

.large_feat_main
{
width: 800px;       
}

但是，您没有在任何地方应用 .large_feat_main 类。

你有 .large_feat 应用所以它拉伸图像 100%，

将宽度更改为 800px 或更改类。

谢谢

于 2013-05-30T16:03:04.477 回答