如何在左浮动 <figure> 的右侧换行一段
How does one wrap a paragraph on the right side of a floated-left <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>
如何仅使用内联 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>