将HTML字母放入引导div中而不破坏样式

Question

Let's say I have this wonderful html email letter. 假设我有一封很棒的html电子邮件信。 Gist . 要点

And I would like to put it inside an HTML page made with bootstrap. 我想将其放入使用引导程序制作的HTML页面中。 Like this: 像这样：

<div class='col-md-4'>
  <h1>Hello</h1>
</div>

<div class='col-md-8'>
  HERE
</div>

If I do it right away, my styles will break. 如果我立即这样做，我的风格就会中断。 Everything becomes a mess. 一切都变得一团糟。 If I start cutting out styles from the message, it will start losing its colors, font sizes, etc. 如果我开始从消息中剪切出样式，它将开始失去其颜色，字体大小等。

Basically, I would like to keep the message intact, but I need the following to be true: 基本上，我希望消息保持完整，但我需要满足以下条件：

Message keeps its email styles, not overriding outer document styling 邮件保持其电子邮件样式，而不是覆盖外部文档样式
Outer document keeps its bootstrap styles 外部文档保留其引导样式
Message fits perfectly into the col-md-8 div, without breaking anything 消息完全适合col-md-8 div，而不会破坏任何内容

Is this even possible? 这有可能吗？

Answer 1

You can either use an iframe or you can use php include . 您可以使用iframe或php include 。

For the latter, just copy the email body content (content within the <body>....</body> ) to a new file and name it say, email.php (Don't worry. There's only one line of php involved). 对于后者，只需将电子邮件正文内容（ <body>....</body> ）复制到一个新文件，并命名为email.php （不用担心。只有一行php参与）。

Then in your current webpage, add a php include line like this: 然后在您当前的网页中，添加如下所示的php include行：

<div class='col-md-4'>
  <h1>Hello</h1>
</div>

<div class='col-md-8'>
  <?php include 'email.php';?>
</div>

And then, copy the css in the <style>....</style> to a new file, say `email.css' and link the current webpage (not the email.php) to that css. 然后，将<style>....</style>的css复制到一个新文件，例如`email.css'，然后将当前网页（而不是email.php）链接到该css。

NB Just make sure to rename your current webpage from someName.html to someName.php and also make sure that your email.php is in the same directory as the main file and you're good to go. 注意：只需确保将当前网页从someName.html重命名为someName.php ，并确保您的email.php与主文件位于同一目录中就可以了。

You mentioned that you want the styling of the main webpage and the email webpage to be independent of each other. 您提到要使主网页和电子邮件网页的样式彼此独立。 For that, just wrap your email.php content with a div wrapper like this: 为此，只需使用如下的div包装器包装email.php内容：

<div id="specialStyle">
    <!-- your email content -->
</div>

Now for any elements whose id or class is same on both pages, say: 现在，对于两个页面上id或class相同的任何元素，请说：

#commonName { /* <---- This is the main webpage --> */
    font-size:14px;
}
#commonName { /* <---- This is the email webpage --> */
    font-size:18px;
}

Just add #specialStyle to the email version like this: 只需将#specialStyle添加到电子邮件版本中，如下所示：

#specialStyle #commonName {
    font-size:18px;
}

将HTML字母放入引导div中而不破坏样式

问题描述

1 个解决方案

解决方案1
0 2015-09-12 19:57:52

将HTML字母放入引导div中而不破坏样式

问题描述

1 个解决方案

解决方案1 0 2015-09-12 19:57:52

解决方案1
0 2015-09-12 19:57:52