Question

如果单击Canucks图像（“信息架构和可用性”下面的第三个图标），即使通过HTML输入图像，也不会在文本旁边显示图像。除非包含在div中，否则将显示此图像。要求我有一个div缠绕它，因为它应该是幻灯片。

有没有办法解决这个问题，或者无论如何构建不需要div的幻灯片？

HTML

<div id="canucksdisplay">
        <p>
            <button class="closeButton">X</button>
        <br>
        <br><class id="blueText">You are viewing: Canucks Usability Tests</class><br>Role: Usability Testing<br><br>The Vancouver Canucks is one of Canada's biggest sports teams, with a very strong and avid community. A lot of their community use their website to interact with each other about recent trades, rumours, and debates. 
        <br>
        <br>
        I was tasked with testing the usablity of Canucks.NHL.com's community features and social features. This involved in analyzing Canucks' target user and thinking of the potential downfalls the user may have while navigating the website and recording a test participant doing so. These tests ended up being successful in pointing out the uncovered flaws.</p>
        <div id="slideshowContainer">
            <div class="slideshow">
        <img src="images/work/canucks1.png">
        <img src="images/work/canucks2.png">
        <img src="images/work/canucks3.png">
    </div>
    <ul id="nav">
        <li id="previous"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>
</div>

CSS

#displays div {
    background-image: url(../images/linedpaper.png);
    border: 1px dashed black;
    display: none;
    height: 675px;
    overflow: hidden;
}
#displays div p {
    display: inline-block;
    text-align: left;
    width: 35%;
    height: 550px;
    left: 0 !important;
    color: black;
    margin-left: 10%;
}
#displays div img {
    width: 30%;
    display: inline-block;
    border: 1px dashed black;
    margin: 20px 0 0 10%;

}
#displayedwork {
    margin-top: -20px;
}
#displayedwork img {
    width: 500px;
    display: inline-block;
    left: 0 !important;
    margin-right: 449px;
}

的jQuery

    //slideshow
    $(document).ready(function() {

    $('.slideshow').cycle({
        fx: 'fade',
    pause: 1,
    prev: '#prev',
    next: '#next'

    });
});
    });

Answer 1

目前，当您将div display is being set to无'添加到div时。

因此，当您添加div时，请将其显示设置为“内联”或inline-block。

Answer 2

控制台中存在JS错误“未捕获的TypeError：无法读取未定义的属性'msie'”这可能是JS无法在页面中按预期工作的原因。

$。浏览器已从jQuery 1.9版中删除。我看到你正在使用jQuery版本 - 1.10.0。如果您仍然需要它，它可以作为插件（https://github.com/gabceb/jquery-browser-plugin）。

使用

每当包裹在div中时图像都不显示

2 个答案: