Question

http://i.imgur.com/aJKBloL.png

我在完成这个盒子的设计时遇到了一些问题。

我已经做了里面有图像的圆形框我已经做了矩形标题框

现在我需要制作第二个框。

HTML：

<section class="about">
    <div class="col-md-4">
        <figure class="circle-image-box-with-caption">
            <img class="wow rotateIn" src="ilorempixel.com/250/250/sports/"/>
            <figcaption>
                <h2>SOMETHING HERE</h2>
            </figcaption>
        </figure>
    </div>
</section>

CSS：

 .col-md-4 {
    padding: 50px;
}
 .circle-image-box-with-caption {
    position: relative;
}
 .circle-image-box-with-caption img {
    margin: 10px 0 20px 0;
    width: 254px;
    height: 254px;
    border-radius: 50%;
    border: 2px solid #f98835; 
}
 .circle-image-box-with-caption figcaption {
    max-width: 200px;
    position: absolute;
    padding: 0 20px;
    bottom: -40px;
    border: 1px solid #f98835;
    width: 100%;
    text-align: left;
    background: #f98835;
}

Answer 1

我使用了绝对定位，并使用右侧和底部属性将其定位在右下角。你可以使用我使用的2％空间和填充。您可能也不需要如此高的z-index并且可以更改颜色

http://jsfiddle.net/jpwjt300/

.subtitle {
    background-color: orange;
    position: absolute;
    z-index:99999;
    right: 2%;
    bottom: 2%;
    padding: 2%;
}

如何在标题框内制作字幕框

1 个答案: