Question

我在这里遇到了问题。

我有一个圆圈框，里面有一个图像，圆圈的页脚有一个标题：

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

但是当我调整窗口大小时，会发生这种情况：

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

我想在标题元素中使用固定宽度，但我无法设置它，因为标题具有绝对位置。

我该如何解决？

代码：

HTML：

    <div class="col-md-4">
        <figure class="circle-image-box-with-caption">
            <img class="wow rotateIn" src="img/baresebaladas.jpg">
            <figcaption>
                <h2>ENTRADA VIP EM BARES E BALADAS</h2>
            </figcaption>
        </figure>
    </div>

CSS：

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

Answer 1

您可以使用max-width代替width http://jsfiddle.net/nvmf9g8z/

.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 2

你需要在图上使用display：inline-block来确保它收缩包装图像

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

<div class="col-md-4">
  <figure class="circle-image-box-with-caption">
    <img class="wow rotateIn" src="http://lorempixel.com/output/nightlife-q-c-254-254-8.jpg" />
    <figcaption>
      <h2>ENTRADA VIP EM BARES E BALADAS</h2>

    </figcaption>
  </figure>
</div>

复杂的圆盒与figcaption

2 个答案: