Question

我是一名视觉设计师，所以这看起来似乎是一个愚蠢的问题（而且在某一点上，这并没有被打破！）但我被卡住了。我试图通过鼠标悬停将图像显示在响应行中。

有人可以帮忙吗？我知道代码被顶了;我一直在努力解决div的问题。鼠标悬停正在工作，但图像现在正在堆叠，不再出现在一行中。它们位于col-lg-4容器之外，但我已将其包括在内。我错过了什么？

* image是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

无法将图像放入适当的容器中。堆叠的图像，无序？

1 个答案: