无法将图像放入正确的容器中。图像堆叠，div 乱序？

Question

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

有人可以帮忙吗？我知道代码被劫持了；我一直在为 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/

Answer 1

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

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

删除此填充并将其添加到您的 figcaptions 子项中：

figcaptions h4{
    padding:30px;    
}

FIDDLE

编辑#1： 替换：

figure {
    display: block;
    position: relative;
}

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

FIDDLE