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。如果这可以调查什么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;
}

放置＆amp;使用CSS定位图像？

1 个答案: