html - 使用 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 设置样式但是 <dd> 都没有元素应用了该类。

编辑

给定这个 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在你的风格值(value)观之后。如果这可行，请调查是什么 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;
}