个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:53:20 28 4
gpt4 key购买 nike

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

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

最佳答案

您可以将此 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>

关于html - 邮箱——如何模拟绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46569333/

28 4 0
文章推荐： javascript - html5 Canvas ，在溢出时添加滚动条
文章推荐： javascript - 如何通过控制台打印.hasClass的值？
文章推荐： javascript - 可编辑行在包含 JSON 数据的表中不起作用？
文章推荐： c++ - 执行 SIFT 算法时出现断言错误 :opencv
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com