Question

代码：

HTML：

<div class="container">
<div class="row">
    <figure class="col-sm-6 item"> 

        <a href="item.html"><img src="http://placehold.it/720x480&text=720x480+Game" class="img-responsive center-block" alt="Game"></a>

        <!-- Item Hover Options -->
        <figcaption>
            <!-- Item Title -->
             <h2>Item Title</h2>

            <!-- Item Description -->
            <p>Item Description</p>
            <!-- Item Progress -->
            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span>

                </div>
                <!-- END progress bar -->
            </div>
            <!-- END progress div -->
        </figcaption>
    </figure>
    <!-- END item title figure -->
</div>

问题是，在悬停时，显示的标题比图像略宽。

如何修复它以使标题的宽度在所有设备上都正确？

Answer 1

当您在position: absolute;上设置figcaption时，其宽度现在将相对于窗口而不是figure（其父元素）。所以width: 100%;应该更少。或者尝试添加保证金。

Answer 2

尝试像这样编辑CSS（删除宽度100％并向左/向右更改）。

figcaption {
  ...
  /* left: 0;
  width: 100%; */
  left: 15px;
  right: 15px;
  ...
}

jsfiddle

Figcaption动画问题

2 个答案: