0

我是一名视觉设计师，所以这似乎是一个愚蠢的问题（并且在某一时刻，这并没有被打破！）但我被困住了。我试图让图像出现在鼠标悬停的响应行中。

任何人都可以帮忙吗？我知道代码被劫持了；我一直在为 div 的顺序而苦苦挣扎。鼠标悬停正在工作，但图像现在正在堆叠并且不再连续出现。它们在 col-lg-4 容器之外，但我已将其包括在内。我错过了什么？

*图片为FPO

/// HTML:

      <div class="col-lg-12">
          <div class="highlight">
              <h3>LOREM IMPSUM DOLAR</h3>
              <h5>The fox and the rabbit.</h5>
            </div>
       </div>


    <div class="row">
            <div class="col-lg-4">
                <figure class="cap-left">
                    <div class="thumbnail">
                        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
                            <figcaptions><h4>Please let this work</h4></figcaptions>
                    </div>
                </figure>
            </div>
         </div>


      <div class="col-lg-4">
                <figure class="cap-left">
                    <div class="thumbnail">
                        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
                            <figcaptions><h4>Please let this work</h4></figcaptions>
                    </div>
                </figure>
            </div>
         </div>

/// JSFiddle:

http://jsfiddle.net/zvcNa/

4

1 回答 1

0

这是由于您的padding: 30px 40px;for figcaptions{}。

figcaptions 是 100% 的宽度和高度，但是将您的填充添加到这个大小。

删除此填充并将其添加到您的 figcaptions children ：

figcaptions h4{
    padding:30px;    
}

小提琴

编辑＃1： 替换：

figure {
    display: block;
    position: relative;
}

.col-lg-4 {
    display:block;
    float:left;
  }

小提琴

于 2013-10-11T10:06:35.543 回答