0

我正在创建一个 HTML 电子邮件签名，并且在手机等小型设备上，当屏幕分辨率不足以容纳签名时，我无法阻止它换行。我已经尝试了我在这里找到的所有内容的组合，无论是关于类似问题的几个建议中的一个或多个，但似乎没有任何效果。

这是正确的签名和两个不正确的版本：

签名示例

这是我们目前拥有的代码：

<div style="line-height:18px; margin:0px; padding: 0px 8px 8px 0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1e394e; display:inline-block; white-space: nowrap; overflow: hidden; min-width:500px;">

Sonnie Parker
合伙人、高级管理员
334-482-4248 avnirvana.com

4

1 回答 1

0

签名将始终换行，因为图像容器设置为浮动。如果您希望您的代码在较小的设备上响应并以不同方式显示，这很好。如果您希望两半始终并排，我会指定它们相对于其父级的宽度。另外，我建议您使用标签组织代码div。

.parent {
  white-space: nowrap;
}

.parent>div {
  display: inline-block;
}

.left {
  width: 50%;
  padding-right: 7px;
  border-right: 2px solid #000000;
  box-sizing: border-box;
}

.left img {
  width: 100%;
}

.right {
  width: 50%;
  color: #1e394e;
  padding-left: 7px;
  box-sizing: border-box;
}
<div class="parent">
  <div class="left">
    <a href="avnirvana.com">
      <img src="https://www.avnirvana.com/images/email_logo.png">
    </a>
  </div>

  <div class="right">
    <div>
      <strong>Sonnie Parker</strong>
    </div>
    <div>
      <em>Partner, Senior Administrator</em>
    </div>
    <div>
      334-482-4248 <a href="avnirvana.com" ; style="color:#0f67b5 !important;">avnirvana.com</a>
    </div>
  </div>
</div>

于 2017-04-15T15:00:31.780 回答