当文本变短时，不会应用带文本和图像的左右浮动

Question

我想用左边的图像制作文字，然后用图像右边的文字。在小屏幕上，图像应显示在文本的顶部。一切正常，直到文字越来越短。

长文本的外观如何：

它使用一些简单的CSS来处理不同屏幕尺寸的不同边距。但问题是如果文本变短，浮动不再正常工作。

长文本的外观如何：

这是我“生产”的代码：

<style>
  <!-- @media (min-width: 591px) {
    .imagerightmargin {
      margin-left: 40px;
    }
  }
  
  @media (min-width: 591px) {
    .imageleftmargin {
      margin-right: 40px;
    }
  }
  
  @media (max-width: 590px) {
    .textmargin {
      margin-top: 320px !important;
    }
  }
  
  -->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>
<div style="clear: both;"></div>

Answer 1

<style>
  <!-- @media (min-width: 591px) {
    .imagerightmargin {
      margin-left: 40px;
    }
  }
  
  @media (min-width: 591px) {
    .imageleftmargin {
      margin-right: 40px;
    }
  }
  
  @media (max-width: 590px) {
    .textmargin {
      margin-top: 320px !important;
    }
  }
  
  -->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  </p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elit.
  </p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
  <img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
  <h3 class="textmargin">
    Some Headline
  </h3>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  </p>
</div>
<div style="clear: both;"></div>

Answer 2

您可以尝试使图像和文本浮动。

这样它可以工作。

改变<p>为<span>，因为<p>标签本身就是display: block;，并且不会漂浮。