邮箱——如何模拟绝对定位

Question

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

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

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 容器设置为相对容器，删除所有浮动和 max-width，让它在屏幕上伸展。然后我在 .image-container img 上设置 absolute 并根据需要定义 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

邮箱——如何模拟绝对定位

Email - how to simulate absolute positioning

html

css

html-email