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

将一些css放在预览持有者身上：

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

Demo fiddle

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，并使其显示为一个表格;然后内部div（对应于“内部”）应该有一个自动高度和隐藏溢出，这需要“强制”它拉伸div的宽度+高度

Answer 4

您可以使用jquery：

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

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

使段落与图像

4 个答案: