如何在浮动左侧<figure>的右侧换行段落

  • 本文关键字:换行 段落 figure css html figure
  • 更新时间 :
  • 英文 :


如何仅使用内联css将段落包裹在浮动的左<figure>的右侧?<figure>

使用内联css(根据请求(,只需将float: left;添加到<figure>即可。

此外,<figure>标记需要位于<p>之前

<!DOCTYPE html>
<html>
<body>
<figure style="float: left; margin: 15px 30px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/JPEG_example_subimage.svg/256px-JPEG_example_subimage.svg.png"/>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor a sem eu fermentum. Sed sed ipsum velit. Duis vitae arcu tempor, eleifend urna nec, dictum libero. Vivamus quis lacinia ipsum. Nulla ut lorem in arcu eleifend efficitur in non sapien. Suspendisse rutrum risus sit amet rutrum lobortis. Nam commodo bibendum ultrices. Fusce ut nulla facilisis, viverra nisi ut, porttitor odio. Donec fermentum, justo in congue dictum, nulla turpis laoreet erat, eget ultrices nisi enim dignissim libero. Nulla aliquam volutpat turpis, non rutrum odio mollis vitae. Duis gravida, nisi id ultricies lobortis, tellus nibh tristique ante, non viverra purus mi sit amet metus. Aliquam erat volutpat. Nunc quis fermentum diam, vel consequat lectus. Sed interdum, enim vitae viverra accumsan, enim mi volutpat ipsum, id cursus lectus nulla et nibh. Vestibulum lectus enim, imperdiet sit amet vestibulum malesuada, ornare eget elit. Ut suscipit eros quis mauris euismod, quis convallis tellus sagittis. Nunc ullamcorper turpis vel eros aliquam, interdum sollicitudin lacus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor a sem eu fermentum. Sed sed ipsum velit. Duis vitae arcu tempor, eleifend urna nec, dictum libero. Vivamus quis lacinia ipsum. Nulla ut lorem in arcu eleifend efficitur in non sapien. Suspendisse rutrum risus sit amet rutrum lobortis. Nam commodo bibendum ultrices. Fusce ut nulla facilisis, viverra nisi ut, porttitor odio. Donec fermentum, justo in congue dictum, nulla turpis laoreet erat, eget ultrices nisi enim dignissim libero. Nulla aliquam volutpat turpis, non rutrum odio mollis vitae. Duis gravida, nisi id ultricies lobortis, tellus nibh tristique ante, non viverra purus mi sit amet metus. Aliquam erat volutpat. Nunc quis fermentum diam, vel consequat lectus. Sed interdum, enim vitae viverra accumsan, enim mi volutpat ipsum, id cursus lectus nulla et nibh. Vestibulum lectus enim, imperdiet sit amet vestibulum malesuada, ornare eget elit. Ut suscipit eros quis mauris euismod, quis convallis tellus sagittis. Nunc ullamcorper turpis vel eros aliquam, interdum sollicitudin lacus eleifend.
</p>
</body>
</html>

最新更新