时间戳

首页 > 解决方案 > 文本变短时不应用左右浮动的文本和图像

html - 文本变短时不应用左右浮动的文本和图像

问题描述

我想用左边的图像制作文字，然后用右边的图像制作文字。在小屏幕上，图像应该出现在文本的顶部。在文本变短之前一切正常。

长文本的外观：

长文本

它使用一些简单的 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>

标签： htmlcssresponsive-designcss-float

解决方案

<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>

推荐阅读