新闻稿页面的对齐在css中不正确

时间:2015-06-09 10:19:47

标签: html css

这是我的代码:



<div class="wrap">
  <div id ="header">
    <a href="index" class = "logo">
      <img src = "logo.png" alt = "" /> 
    </a>
    <nav class="navigation">
      <ul>
        <li>Share</li> |
        <li>Join</li> |
        <li>See Safty Tips</li> |
        <li>Settings</li>
      </ul>
    </nav>
  </div>

  <div class="wrapper">

    <img src="accident.png" alt="">
    <div id="right-content">
      <h2>Hit and Run No Injuries</h2>
      <p>2.610 miles from your new neighbor<br />
        May 20, 2015 at 12.34 PM </p>
      <h4>California HWP 2 - High Level</h4>
    </div>
  </div>

  <div class="wrap">
    <ul class="secure_v5">
      <li id="li-incident">
        <a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&amp;vn=&amp;gORn=1">See Incident Location</a>
      </li>                
      <li id="login-signup">
        <a class="button dark"  href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
      </li>                
    </ul>
  </div>

  <div class="thanks">

    <p>Sincerely,<br />
      The AlertID Team</p>
  </div>
  <p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>

  <div class="footer-links">
    <ul>
      <li><a href="http://www.facebook.com/AlertID" class="sf" target="_blank"></a></li>
      <li><a href="http://www.twitter.com/AlertID" class="st" target="_blank"></a></li>
      <li><a href="http://www.youtube.com/user/AlertIDvideo" class="sy" target="_blank"></a></li>

    </ul>

  </div>

</div>
&#13;
&#13;
&#13;

这里是jsfiddle,(没有包含图片)

当我运行此代码时,某些对齐方式不正确,

我需要像this

这样的东西

我只是混淆了可以使用哪个css,有人可以帮我吗?

谢谢,

2 个答案:

答案 0 :(得分:0)

使用HTML表格来控制设计布局和一些演示文稿。您可能习惯于为您的网页使用纯CSS布局,但这种方法不会在电子邮件环境中停留。

使用内联CSS控制电子邮件中的其他演示元素,例如背景颜色和字体。

答案 1 :(得分:0)

您只需将 div#right-content 置于右侧即可 在CSS上尝试。

#right-content {
float:right;
width:600px;
}

#right-content h2{
text-align:center;
}

我在 div#right-content 中为h2创建了一个小属性 并为右内容定义固定宽度。由于属性 float:right

,这是必要的