Question

我试图在两个元素之间放置一个图像，但当它到达电子邮件客户端时，它不起作用。
是否有可能获得元素的绝对定位或至少用浮动或其他东西模拟它？如果没有，那么......回到基础知识然后（图像）我有几个参考文献的解决方法，但它们都没有为我工作。

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        #news-wrapper {
            margin: 0 auto;
            width: 100%;
            max-width: 600px;
            font-family: Arial, Helvetica, sans-serif;
            position: relative;
        }

        #news-head {
            height: 117px;
            padding: 50.5px;
            position: relative;
            background-color: #8e8e8e;
        }

        .heading {
            width: 100%;
            max-width: 340px;
        }

        .heading h1 {
            color: white;
            font-weight: 300;
            background-color: #713235;
            padding: 9.5px;
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            font-stretch: condensed;
        }

        .image-container {
            width: 100%;
            max-width: 263px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            bottom: 50px !important;
            position: relative !important;
            left: -3% !important;
            right: 0;
            float: right;
        }

        #news-body {
            width: 100%;
            max-width: 555px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
        }
        p.default {
            color: #4c4c4e;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.81;
        }
    </style>
</head>

<body>
    <div id="news-wrapper">
        <div id="news-head">
            <div class="heading">
                <h1>Lorem ipsum dolor sit amet.</h1>
            </div>
        </div>
        <div class="image-container">
            <img src="http://via.placeholder.com/263x115" alt="">
        </div>
        <div id="news-body">
            <div style="margin-top: 120px;margin-bottom: 34px">
                <h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
                <p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat.
                    Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum
                    eu. Aliquam malesuada aliquam nulla ut suscipit. Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas.</p>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 1

在这种情况下，

margin可能有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    #news-wrapper {
      margin: 0 auto;
      width: 100%;
      max-width: 600px;
      font-family: Arial, Helvetica, sans-serif;
      position: relative;
    }
    
    #news-head {
      height: 117px;
      padding: 50.5px;
      position: relative;
      background-color: #8e8e8e;
    }
    
    .heading {
      width: 100%;
      max-width: 340px;
    }
    
    .heading h1 {
      color: white;
      font-weight: 300;
      background-color: #713235;
      padding: 9.5px;
      font-size: 24px;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      font-stretch: condensed;
    }
    
    .image-container {
      width: 100%;
      max-width: 263px;
      margin-top: -50px;
      margin-right: 3%;
      /* maintain position to allow stacking */
      position: relative;
      right: 0;
      float: right;
    }
    
    #news-body {
      width: 100%;
      max-width: 555px;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
    }
    
    p.default {
      color: #4c4c4e;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.81;
    }
  </style>
</head>

<body>
  <div id="news-wrapper">
    <div id="news-head">
      <div class="heading">
        <h1>Lorem ipsum dolor sit amet.</h1>
      </div>
    </div>
    <div class="image-container">
      <img src="http://via.placeholder.com/263x115" alt="">
    </div>
    <div id="news-body">
      <div style="margin-top: 120px;margin-bottom: 34px">
        <h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
        <p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
          ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

电子邮件客户端应该能够解析relative和absolute位置。通过包含float，您似乎正在尝试相互冲突的定位。

在下面的示例中，我将.image-container容器设置为relative，删除所有浮动和max-width，让它在屏幕上伸展。然后我在.image-container img上设置绝对值，并根据需要定义top和right个位置。希望有所帮助。

#news-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
}

#news-head {
  height: 117px;
  padding: 50.5px;
  position: relative;
  background-color: #8e8e8e;
}

.heading {
  width: 100%;
  max-width: 340px;
}

.heading h1 {
  color: white;
  font-weight: 300;
  background-color: #713235;
  padding: 9.5px;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-stretch: condensed;
}

.image-container {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.image-container img {
  position: absolute;
  top: -50px;
  right: 40px;
}

#news-body {
  width: 100%;
  max-width: 555px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

p.default {
  color: #4c4c4e;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.81;
}

<div id="news-wrapper">
  <div id="news-head">
    <div class="heading">
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
  </div>
  <div class="image-container">
    <img src="http://via.placeholder.com/263x115" alt="">
  </div>
  <div id="news-body">
    <div style="margin-top: 120px;margin-bottom: 34px">
      <h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
      <p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
        ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

Answer 3

您可以将此CSS用于图像容器，基本上使用margin-top将其向下移动到所需位置：

.image-container {
  width: 100%;
  max-width: 263px;
  float: right;
  margin-top: 60px;
}

如果这会使#news-body向下移动太多，您可以对其应用否定margin-top，就像下面的代码段一样。

#news-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
}

#news-head {
  height: 117px;
  padding: 50.5px;
  position: relative;
  background-color: #8e8e8e;
}

.heading {
  width: 100%;
  max-width: 340px;
}

.heading h1 {
  color: white;
  font-weight: 300;
  background-color: #713235;
  padding: 9.5px;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-stretch: condensed;
}

.image-container {
  width: 100%;
  max-width: 263px;
  float: right;
  margin-top: 60px;
}

#news-body {
  width: 100%;
  max-width: 555px;
  margin-top: -40px;;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

p.default {
  color: #4c4c4e;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.81;
}

<div id="news-wrapper">
  <div id="news-head">
    <div class="heading">
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
<div class="image-container">
    <img src="http://via.placeholder.com/263x115" alt="">
  </div>
  </div>
  
  <div id="news-body">
  
  <div style="margin-top: 120px;margin-bottom: 34px">
      <h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
      <p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
        ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

Answer 4

定位是错误的，并且在每个浏览器中都不起作用。同样有保证金。

https://www.campaignmonitor.com/css/positioning-display/position/

你可以使用一些用于盒子模型的CSS标签，但它确实很受欢迎。 https://www.campaignmonitor.com/css/box-model/

我无法想出一个简单的方法来建议在这种情况下会起作用的方法。电子邮件不是前端设计。我建议你先查看这个网站，然后再继续告诉你什么在电子邮件中有用。

https://www.campaignmonitor.com/css

电子邮件 - 如何模拟绝对定位

4 个答案: