Question

我的网站上有一些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等添加。请注意这一点。

Answer 1

我认为你的问题更多的是HTML问题，而不是CSS问题。您上面的项目有以下标记：

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

以下的代码有以下代码：

<li>
  <div class="capty-wrapper" style="overflow: hidden; height: 125px; width: 125px;">
  <div class="capty-image">
    <a href="#">
      <img alt="Pasta polerska" src="images/offer/g3_farecla.jpg" class="imgc fix_promo">
    </a>
   </div>
   <div class="capty-caption" style="height: 40px; opacity: 0.7; position: relative; top: -40px;">Pasta polerska</div>
 </div>
</li>

我的建议是统一标记并删除所有内联样式。如果标记相同，那么你应该从其他CSS样式中获得相同的外观。

Answer 2

由于您希望保留代码结构，因此您必须做的主要事情是不将ul和li元素显示为{{1 （内联元素不能占用宽度或高度），而是在我的小提琴示例（下面的链接）中的块级inline内制作li元素inline-blocks我已经把你的ul和您的capty.css并更改了相关位（我在底部的工作表中留下了您自己的CSS，注释掉以便您可以进行比较）

我可以将新的capty元素CSS放在样式表中，但是由于需要覆盖由custom.css生成的一些部分，我通过jQuery完成了它，还添加了capty.js修复IE7。

“内联问题”修复后的主要问题是，position: relative;生成的宽度和高度为125像素，但为了允许填充和边框，需要稍微不同才能获得您capty-wrapper示例

上的127px

然后我将div.picture CSS与您的capty-wrapper CSS匹配

对div.picture的更改是为了使标题填充包装器并且还有足够的高度来合并更长的标题，我不确定capty实际上是如何工作的所以我不确定它是多么复杂当涉及不同长度的字幕时，文本垂直居中..或许另一个问题;）

但希望这个例子可能会在某种程度上帮助进行对齐

示例：HERE

Answer 3

尝试将图片及其描述内容整合到一个div中，然后根据样式进行样式处理：

<div>
<img style="width:100px; position:relative;"/>
<div style="width:90px; padding:5px; background-color:blue; position:relative; top: -

34px;">Description</div>
</div>

（当然你可以调整以适应）

Answer 4

我一直在阅读并理解您希望按照自己的方式保存代码，但每个人都指出您的HTML很难遵循。也许你可能会像@Thomas Shields所说的那样“抓住插件”并根据http://jsfiddle.net/robx/uMBEn/做一些更简单的事情只是想一想。可能比使用该插件简单得多。

Answer 5

对css进行以下更改，纠正了我本地测试中的布局问题。

首先，删除以下声明：

#car-parts-container ul li div {
  display:inline;
}

其次，添加：

width: 127px;

到样式表中的.picture。

干扰CSS的问题

5 个答案:

示例：HERE