html - 当图像在 html 中的文本之后列出时，在图像周围环绕文本

Question

我正在一个可以修改 CSS 但不能修改 HTML 的系统中工作（也不能使用 javascript）。我试图让文本环绕放置在页面右上角的图像。我遇到的问题是，我找到的每个解决方案都要求在 html 中的文本之前列出图像。有没有解决的办法？谢谢！

<style type="text/css">
    @media only screen and (max-width:480px) {
        img {
            display:block;
            float:none;
            margin:0 auto 20px !important;
        }
    }
</style>

<div style="Margin:20px;">

            <p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.
            </p>
              <img src="http://i.imgur.com/6bkt2Qk.gif" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;" />
</div>

标签： htmlcssword-wrap

Answer 1

没有真正的方法可以做您所描述的事情，但您绝对可以创建一个解决方法，如下所示：

img{
  border-radius: 50%;
  margin: 20px;
  border: 2px solid black;
  position: absolute;
  top: 0;
  right: 0;
}

div#main::before{
  content: "";
  float: right;
  margin: 90px;
}

<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fermentum et sollicitudin ac orci phasellus egestas. Vitae congue mauris rhoncus aenean vel elit scelerisque. Sed lectus vestibulum mattis ullamcorper. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Sed augue lacus viverra vitae congue eu. Tellus orci ac auctor augue mauris. In iaculis nunc sed augue lacus. Quis commodo odio aenean sed. Sollicitudin nibh sit amet commodo nulla facilisi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Lorem ipsum dolor sit amet consectetur. Facilisis volutpat est velit egestas.

Dolor sit amet consectetur adipiscing. Id eu nisl nunc mi. Varius vel pharetra vel turpis nunc eget. Amet dictum sit amet justo donec enim. Diam donec adipiscing tristique risus nec. Integer quis auctor elit sed vulputate mi sit amet. Magna ac placerat vestibulum lectus mauris. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Sit amet massa vitae tortor condimentum lacinia quis. Lectus proin nibh nisl condimentum id venenatis a condimentum. Nunc non blandit massa enim nec. Dolor sit amet consectetur adipiscing elit. Diam maecenas sed enim ut sem viverra. Viverra maecenas accumsan lacus vel facilisis volutpat est. Amet nulla facilisi morbi tempus iaculis urna. Mauris ultrices eros in cursus turpis massa tincidunt.

Eu volutpat odio facilisis mauris. Elit sed vulputate mi sit amet mauris. Dignissim convallis aenean et tortor at risus viverra. Lobortis feugiat vivamus at augue eget arcu dictum. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Congue eu consequat ac felis donec. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Mi proin sed libero enim. Risus pretium quam vulputate dignissim suspendisse in est ante in. Pellentesque habitant morbi tristique senectus et netus et. Amet justo donec enim diam vulputate ut pharetra. Tristique magna sit amet purus gravida quis blandit turpis cursus.

Vel facilisis volutpat est velit egestas dui. Vitae nunc sed velit dignissim sodales ut eu sem integer. Aliquet enim tortor at auctor urna. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Vel risus commodo viverra maecenas. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Ut tellus elementum sagittis vitae et. Nunc sed blandit libero volutpat sed cras. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Ornare arcu odio ut sem. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Diam in arcu cursus euismod. Morbi tristique senectus et netus. Senectus et netus et malesuada  fames ac turpis egestas. Duis at consectetur lorem donec massa. Tellus at urna condimentum mattis pellentesque id. Sed arcu non odio euismod lacinia.
<img src="https://via.placeholder.com/150">
</div>