在 <figure> 元素中包含一个长标题

Question

我想在带有标题的文本右侧显示图像。 HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>figure example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <figure class="is-pulled-right">
        <img src="https://bulma.io/images/placeholders/128x128.png"
        width="128" height="128" alt="Example">
        <figcaption>
          <small>Long Text. Longer than the image is wide. Lorem ipsum dolor
          sit amet.</small>
        </figcaption>
      </figure>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
  </section>
  </body>
</html>

结果：

因为标题的文字很长，所以图像占用了很多空间。我如何包装标题的文本，使其宽度不超过图像？我希望图像位于文本的右侧。

顺便说一句：<figure class="is-pulled-right"> 是解决这个问题的正确方法吗？ columns 有效，但显然不要让文本围绕 <figure> 元素流动。

Answer 1

试试这个。我为此添加了 css。

.is-pulled-right {      
  margin-left: 4%;
  width: 128px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>figure example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <figure class="is-pulled-right">
        <img src="https://bulma.io/images/placeholders/128x128.png"
        width="128" height="128" alt="Example">
        <figcaption>
          <small>Long Text. Longer than the image is wide. Lorem ipsum dolor
          sit amet.</small>
        </figcaption>
      </figure>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum. 
      </p>
    </div>
  </section>
  </body>
</html>

在 <figure> 元素中包含一个长标题

Wrap a long caption in a <figure> element

css

bulma