Question

我正在尝试使用contenthover脚本实现这样的布局：

但相反，我得到的是here。图像没有正确排列。

我尝试使用span而无效，并给出div显示：内联和显示：内联块没有区别。

我对图像和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>

目前还不确定我遗漏了什么。

Answer 1

你应该添加这个CSS：

{{1}}

Answer 2

您的桌面结构不足。 TR和TD不在正确的位置，尝试这样的事情：

td {
  border: #f00 dashed 1px;
  vertical-align: top;
}
div.ch-hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
div.ch-hover div.contenthover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}
div.ch-hover div.contenthover:hover {
  opacity: 1;
}
div.ch-hover div.contenthover p {
  color: #fff;
  padding: 10px;
}

<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_ralphlauren.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_dwp.jpg"/>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_gap.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_ever.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_koral.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_koraltides.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_7famk.jpg"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <div class="ch-hover">
          <div class="contenthover">
            <p>Some text</p>
          </div><img src="http://nicolekingburroughs.com/images/nb15-product_agjeans.jpg"/>
        </div>
      </td>
    </tr>
  </tbody>
</table>

jQuery contenthover divs开始换行而不是保持水平

2 个答案: