使段落与图像宽度相同

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，或者必要时更改标记。

这有可能吗？

请注意，预览不能具有固定的宽度！

- Toniq

---

问题在于当宽度增加时，高度也会增加，因此没有简单的解决方案：https://jsfiddle.net/2hum47n0/3/ - Marcos Pérez Gude

请看这里：https://dev59.com/PW035IYBdhLWcg3wVefn - Richard Osseweyer

如果您不想要一个固定宽度的预览，请使用百分比指定宽度。 - Roysh

你真的需要两个容器（a 和 div）吗？ - Rodrigo

Answer 1

在预览容器上添加一些CSS：

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

演示代码

- Bogdan Kuštan

Answer 2

让我们试一下。

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;
}

演示

工作原理：
您需要拥有一个最小宽度为1％的周围div，并将其显示为表格；然后内部div（对应于“inner”）应具有自动高度和隐藏溢出，这是必要的，以“强制”将其拉伸div的宽度+高度

- Eezo

---

这里完全不需要使用“float: left”。避免使用浮动来实现这些内容。 - Marcos Pérez Gude

@MarcosPérezGude那个OP代码（请参见他的演示），我不确定它对他的网站有什么影响，所以我没有移除它。 - Eezo

Answer 3

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

请尝试这个并让我知道是否有任何问题。请检查跨浏览器并报告是否有任何问题。

- Lucian

Answer 4

你可以使用 jQuery：

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

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

- Mister M

---

请注意，预览不能有固定宽度！ - Toniq