Question

我有一篇文章，其中包含带描述的图片。描述不应该长于图像。图像的宽度可能不同，因此我无法将类.article-image设置为固定宽度（可以解决问题）。

＆＃13;

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}

＆＃13;

<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="https://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

＆＃13;

http://codepen.io/DaFunkyAlex/pen/mWMVdz

Answer 1

<figure>名为<figurecaption>

您可以将图标添加到<figure>标记内并添加<figcaption>，然后添加<p>标记等，从而为图像添加标题。 <figure>标记用于分割内容。数字还可用于显示与其他内容不同的代码片段。

/* Should you want to center the caption:
figure {
    display: inline-block;
}
figure img {
    vertical-align: top;
}
figure figcaption {
    text-align: center;
}*/

<figure>
  <img src="//i.stack.imgur.com/N7dX8.png" width="100px" height="100px" />
  <figcaption>A doge above a very long text with Lorem Ipsum</figcaption>
</figure>

Answer 2

虽然有点不同寻常，但纯粹的css解决方案仍然存在。它利用display:table来计算单元格的宽度。

图像可以具有动态大小。标题将增长到图像的大小，没有进一步，它将在必要时开始占用新行。

在.article-image上添加：display:table;。
在.article-image > div添加display: table-caption;和caption-side: bottom;

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
  display: table;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
  display: table-caption;
  caption-side: bottom;
}

<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="http://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

Answer 3

<强>更新

根据@Lars的回答：display: table-caption设置在标题上是一种解决方案，但没有任何假设。

<强>原始

我认为没有办法做到这一点，不计算JS或假设大小。在我看来，最好的解决方案是假设描述中的行数

如果您知道描述将包含多少行，则可以为其设置固定（使用em）填充。 位置：绝对描述段落。

fixed 2 lines example

.article-image {
  float: left;
  position: relative;
  margin-right: 10px;
  font-size: 0.8em;
  font-style: italic;
  padding-bottom: 2em;  
}

.article-image > div {
  position: absolute;
  bottom: 0;
}

它不适用于窄图像，因为描述将缩小并且将有许多行。但我认为你不需要每1行1个字。

Answer 4

试试此代码......

＆＃13;

* {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

figcaption {
  text-align: center;
  font-size: 10px;
  word-wrap: break-word;
  max-width:140px;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}

＆＃13;

<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <figure class="article-image">
      <img src="http://placehold.it/140x140">
      <figcaption>Lorem ipsum dolor sit amet,consetetur sadipscing elitr | &copy; author</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ipsum, sed sit rerum aut cum ducimus odio dignissimos! Obcaecati quaerat, provident fugiat
      assumenda inventore dolore laudantium praesentium minima nulla aperiam! Ea nihil laudantium delectus eius iusto voluptatibus beatae pariatur, ducimus, ratione voluptatem. Unde perferendis laboriosam neque, soluta ducimus, maiores. Necessitatibus
      nihil, eaque harum temporibus qui autem earum beatae placeat numquam ab possimus dolores voluptatum fugiat expedita maxime consectetur est veniam esse minima odio saepe, doloremque dolorum repudiandae eum. Obcaecati possimus nostrum, eveniet culpa,
      ullam neque omnis adipisci magni consectetur esse accusantium suscipit amet repudiandae eos assumenda, iste blanditiis, aperiam aut!</p>
</article>

＆＃13;

Answer 5

问题是你的div不知道图像宽度。但是，您可以进行简单的JavaScript计算以实现您的目标：

var divs = document.querySelectorAll('.article-image');
for(i = 0;i<divs.length;i++) {
  var imgW = divs[i].querySelector('img').width;
  divs[i].querySelector('div').style.width = imgW+'px';
}

http://codepen.io/anon/pen/qrXbJJ

Answer 6

如果你没有明显的图片大小，我担心它不能用css完成。我建议一点js：

var images = document.querySelectorAll(".article-image"),
    i = 0, ii = images.length;
for(i; i<ii; i++){
  images[i].style.width = images[i].querySelector("img").clientWidth + "px";
}

http://codepen.io/anon/pen/NpvxON

Answer 7

另一种方法是在css中使用img标签

article {
  width: 600px;
  margin: 0 auto;
}
img{
  width: 350px;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
}

<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="http://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

Answer 8

您只需要在div中添加宽度

.article-image {
  width:100px;
  float: left;
  margin: 0 10px 10px 0;
}

图像描述的宽度

8 个答案: