如果您单击 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'
});
});
});