我想在带有标题的文本右侧显示图像。 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> 流动元素。
最佳答案
试试这个。我为此添加了 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>关于css - 在 <figure> 元素中包含一个长标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47174658/