放置&使用 CSS 定位图像？

Question

完全编辑了这个问题，不确定以前是否有意义。

好的，我在网站上定位某些图像时遇到困难。我正在使用 Slidedeck jQuery 幻灯片，在第三张幻灯片中我想要一个作品集，因此只需显示 6 张图像（2 行，每行 3 张）。

在index.html中，幻灯片设置如下；

<div id="slidedeck_frame" class="skin-voyager"> 
<dl class="slidedeck">

<dt>ABOUT US</dt> 
<dd>About the company here</dd> 

<dt>OUR SERVICES</dt> 
<dd>Company services here</dd>

<dt>PORTFOLIO</dt> 
<dd>Images of completed work here</dd> 

<dt>Contact Us</dt> 
<dd>Contact form here</dd>

</dl>
</div>

每张幻灯片都在 CSS 表中使用以下标签进行格式化；

.slidedeck dd.slide_1 

在第三张幻灯片中，我需要能够使用 CSS 来简单地显示图像行来定位它们。我尝试了很多事情，但都做不好。在index.html中我尝试过；

<dt>PORTFOLIO</dt> 
<dd><img src="images/myImage1.png" width="130" height="130" />
</dd>

但这显然只是显示图像，无法对其进行格式化。

我也尝试过；

<dt>PORTFOLIO</dt> 
<dd>
<div>
    <img id="image1" src="images/myImage1.png" width="130" height="130">
</div>
</dd>

然后使用下面的CSS来定位；

img#image1 {
position: relative;
top: 20px;
left: 10px;
z-index: 5;

但图像

根本不显示。

有什么建议吗？

Answer 1

您正在使用 dd.slide_1 进行样式设置，但没有一个

元素应用了该类。

编辑

给定这个html：

<dl class="slidedeck">
    <dt>PORTFOLIO</dt>
    <dd>
        <img src="images/myImage1.png" width="130" height="130" />
        <img src="images/myImage2.png" width="130" height="130" />
        <img src="images/myImage3.png" width="130" height="130" />
        <img src="images/myImage4.png" width="130" height="130" />
        <img src="images/myImage5.png" width="130" height="130" />
        <img src="images/myImage6.png" width="130" height="130" />
    </dd>

您应该能够像这样设置图像的样式

.slidedeck dd img {
    /* add whatever styles you want */
}

如果这不起作用，请尝试在样式值后添加 !important 。如果这有效，请调查哪些 CSS（可能来自 jQuery 插件）正在干扰您的样式。如果可以的话，尽量不要留下 !important 。

因此，对于 2 行 3 张图像，您需要这个 css

.slidedeck dd {
    width: 390px; /* 3x your image width */
    overflow: hidden; /* To contain floats */
}

.slidedeck dd img {
    float: left;
    display: block;
}