Javascript jquerycontenthover divs开始一个新行，而不是保持水平

我正试图通过contenthover脚本实现这样的布局：

但我却得到了出现的东西。图像排列不正确

我尝试改用span，但没有效果，并且给出了divs display:inline和display:inline块，没有任何区别

我对图像和contenthover div的css代码如下所示：

    .contenthover {
    margin: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    clear: both;
}
#container #bg1 .verbiage-nb img {
    margin: 0px;
    float: left;
    clear: none;
}

他们的HTML：

<img id="prod_rl" src="images/nb15-product_ralphlauren.jpg" width="263" height="242"/>
    <div class="contenthover">
    <h3>Ralph Lauren</h3>
    </div>

拉尔夫·劳伦

最后，页面底部的js脚本：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/contenthover-full.js"></script>
<script>
    $('#prod_rl').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8
    });
</script>

$（'#prod_rl'）。contenthover({
叠加背景：'#000'，
叠加不透明度：0.8
});

---

不确定我在这一点上遗漏了什么。

您应该添加以下CSS：

.ch_element.ch_wrapper {
  float:left;
}

---

你的桌子结构不合适。TR和TD不在正确的位置，请尝试以下操作：

td{
边框：#f00虚线1px；
垂直对齐：顶部；
}
分区ch-hover{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
}
div.ch-hover div.contenthover{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
}
div.ch-hover div.contenthover:悬停{
不透明度：1；
}
div.ch-hover div.contenthover p{
颜色：#fff；
填充：10px；
}

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

请你能写出你曾经尝试过的代码吗？做一把小提琴，这样任何人都可以帮助你。do

float:left

使用类“Chu元素”进行div可以解决你的问题吗？非常感谢你的帮助。我尝试了这种方法，并进一步遵循Jeremy的表格结构建议，效果非常好。这个建议产生了奇迹。我从它那里得到了我所需要的，现在它来了。我真的很感谢你的时间，不用担心。很高兴我能帮忙：）这种布局从来都不容易实现。你也应该看看，那会创造奇迹。