问题与孩子宽度小于父宽度

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; 
}