無法將圖像放入適當的容器中。圖像堆積，divs亂序？

我是一個視覺設計師，所以這可能看起來是一個愚蠢的問題（並且一度沒有中斷！），但我被卡住了。我試圖讓圖像出現在鼠標懸停的響應行中。無法將圖像放入適當的容器中。圖像堆積，divs亂序？

任何人都可以幫忙嗎？我知道代碼是頂起來的;我一直在努力與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/

來源

2013-10-11 user2824954

這是由於您的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

來源

2013-10-11 10:06:35 EdenSource

太好了，非常感謝！然而，我的問題依然存在，不知道爲什麼圖像彼此疊加，而不是連續出現？我將懸停信息留在了我原來的問題中，因爲如果我從我的代碼中提取出這些信息，圖像就會正確對齊，但是如果我將它放入其中，則會出現問題。但是，我需要鼠標懸停，所以我仍然卡住。：/ – user2824954

對不起，我誤解了一半的問題。我已經更新了我的答案，您可以找到解決辦法。不要猶豫，如果它不是你所期望的，那麼就給予更多的準備。 – EdenSource

不用擔心！而且，你太棒了！非常感謝！我看了這麼久，它又花了一雙眼睛。我會學習這個Web開發的東西，但。再次，謝謝！：d – user2824954

無法將圖像放入適當的容器中。圖像堆積，divs亂序？

回答

相關問題