使段落与图像宽度相同

Question

我正在尝试使 p 标记与图像的宽度相同。

<a class="preview-holder" href="#" target="_blank">
  <div class='preview'>
    <img src="http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg" alt="" />
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
  </div>
</a>

https://jsfiddle.net/2hum47n0/2/

如果图像比文本的宽度大，我看起来不错，否则就不行。

我不需要使用 p，我可以使用 span，或者在必要时稍微更改标记。

可能吗？

注意预览不能固定宽度！

Answer 1

您可以使用 jquery:

http://jsfiddle.net/n6DAu/2608/

$('.preview').width($('#img').width());

Answer 2

.preview {
  display: inline-block;
  width: 40%;
}

.preview .image-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 120px;
  
}

.preview .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.preview .text {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

<a class="preview-holder" href="#" target="_blank">
  <div class='preview'>
    <div class="image-wrapper">
      <div class="image" style="background-image: url(http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg;"></div>
    </div>
    <div class="text">
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
    </div>
  </div>
</a>

试试这个，如果有任何问题请告诉我。请检查跨浏览器并报告是否有任何问题。

Answer 3

试试这个

HTML

<a class="preview-holder" href="#" target="_blank">
  <div class='preview'>
  <div class="inner">
    <img src="http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg" alt="" />
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
    </div>
  </div>
</a>

CSS

.preview {
  position: relative;
  top: 0px;
  left: 0px;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 1%;
  display:table;
}
.preview .inner {height: auto; overflow: hidden}
.preview img {
  display: block;
}

.preview p {
  margin: 0;
  padding: 15px 10px;
  color: #333;
}

.preview-hover {
  background-color: #FC5A5A;
}

DEMO

工作原理：
您需要有一个具有最小宽度 (1%) 的环绕 div，并使其显示为 table；那么内部div（对应于"inner"）应该有一个自动高度和隐藏溢出，这是"force"需要它来拉伸div的宽度+高度

Answer 4

将一些 css 放在预览支架上：

.preview-holder {
  display: block;
  max-width: 1px;
}

Demo fiddle

使段落与图像宽度相同

Make paragraph the same width as the image

css

responsive