如何使用 HTML/CSS 实现此布局？
这是我当前正在使用的，但此代码保留 <p> block 在最右边的列中，而不是将其包裹在图像周围。如果文本环绕图像，效果会更好，尤其是在视口(viewport)变窄的情况下。
article {clear:both; float:left; width:100%; margin:1em 0 1em 0;}
article img {display:inline; clear:left; float:left; width:16.667%; margin:0 0 1em 0; vertical-align:middle;}
article h3 {display:inline; clear:right; float:right; width:79.167%; text-align:left; margin:0 0 0.33em 0; margin-top:-0.33em;}
article p {display:inline; clear:right; float:right; width:79.167%; text-align:left; margin-top:0;}
最佳答案
这是实现所需效果的非常简单的方法。然后，您可以根据您的用例调整图像/容器尺寸和边距。
img { width: 100px; height: 100px; float: left;}
p { text-align: justify; }<article>
<img src="https://cdn.discordapp.com/attachments/876642688777216010/1017921017361993778/unknown.png" alt="cute lil bug"/>
<h3>Title</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</article>关于html - 如何用 HTML/CSS 获得这种文字环绕效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73676255/