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>元素中包裹一个长标题

1 个答案: