問題與孩子寬度小於父寬度

Question

Example

我有一個很難複製的一個很酷的hover effect我在codrops發現較大。我使用的是完全相同的html代碼，但的元素大於其父元素。

我在做什麼錯？

<div class="grid"> 
<figure class="effect-romeo"> 
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/> 
        <figcaption> 
         <h2>Wild <span>Romeo</span></h2> 
         <p>Romeo never knows what he wants. He seemed to be very cross about something.</p> 
         <a href="#">View more</a> 
        </figcaption>   
       </figure><figure class="effect-romeo"> 
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/> 
        <figcaption> 
         <h2>Wild <span>Romeo</span></h2> 
         <p>Romeo never knows what he wants. He seemed to be very cross about something.</p> 
         <a href="#">View more</a> 
        </figcaption>   
       </figure><figure class="effect-romeo"> 
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/> 
        <figcaption> 
         <h2>Wild <span>Romeo</span></h2> 
         <p>Romeo never knows what he wants. He seemed to be very cross about something.</p> 
         <a href="#">View more</a> 
        </figcaption>   
       </figure> 
</div> 

Answer 1

看來這個問題是因爲類.grid figure figcaptionpadding:2em的。刪除並檢查輸出！更新你的CSS像下面，並檢查！

的CSS：

.grid figure figcaption{ 
    //padding:2em; 
}