我的网站上的CSS出现问题。我想做的是在网站上放置一些图片标题。我一直在尝试使用jquery-capty插件(http://www.wbotelhos.com/capty/)和一些自定义CSS样式的框架图像(http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/)。这两种解决方案都可以在我的常规布局中使用,但是当我将它们放入内联列表中时,它们各自会分开。

我在此站点上创建了一个小问题的示例:

http://auto-czesci.innovative-labs.com/test.html

上面的两个图像显示了这些样式的正确行为,但是下面的图像只是被打断了。

有人可以帮我解决这个问题吗?

编辑
我在这里使用两种方法。

一个带有css类的图片:

<div class="picture" style="width: 127px;"><img class="popup" src="images/offer/g3_farecla.jpg"><br/>Pasta polerska</div>


另一个带有jquery capty插件:

<img class="imgc fix_promo" src="images/offer/g3_farecla.jpg" alt="Pasta polerska"/>


这些行对我来说很清楚,我想让其中一种方法起作用。

使用firebug打开网站时可见的所有其他代码都可以通过jquery等添加。请注意。

最佳答案

如要保留代码结构,主要要做的就是不要将ulli元素显示为inline(内联元素不能采用宽度或高度),而是在我的小提琴示例中,在块级别li中的inline-blocks元素ul(下面的链接)我已经使用了您的capty.csscustom.css并更改了相关位(我在我的工作表位于底部,已注释掉,以便您可以进行比较)

我可以将新的capty元素CSS放在样式表中,但是由于需要覆盖其中的某些部分,因此我通过jQuery完成了capty.js生成的某些部分,还为IE7添加了position: relative;修复程序。

修复“内联问题”之后,主要的事情是capty-wrapper生成的宽度和高度为125px,但是为了允许填充和边框,需要略有不同才能获得127px在您的div.picture示例中

然后,使capty-wrapper CSS与您的div.picture CSS相匹配

capty-caption的更改是为了使标题填满包装并且还具有足够的高度以合并较长的标题,我不确定capty的实际工作原理,因此不确定在不同的情况下使文本垂直居中有多么复杂长度字幕涉及..也许另一个问题;)

但希望此示例可能会有所帮助

示例:HERE

10-02 18:48