与另一个相比，一个div中的文本位于较低的位置

时间：2015-02-11 11:22:00

标签： javascript html css

我现在有这个JAVA脚本。

 /* ******************************************************************** */
 /*                  Generated by: http://csscreator.com                 */
 /* ******************************************************************** */
 html,
 body {
   margin: 0;
   padding: 0;
   text-align: center;
   BACKGROUND: #fff;
   font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
 }
 a {
   color: #fff;
   text-decoration: none;
   white-spaces: nobreak
 }
 li {
   color: #fff;
 }
 body {
   color: #BAC6DE
 }
 #pagewidth {
   width: 1395px;
   text-align: left;
   margin: 0px auto;
 }
 #header {
   position: relative;
   height: 100px;
   width: 1395px;
   display: block;
   overflow: none;
   padding: 0px 0px 0px 0px;
 }
 #header h2 {
   color: #fff;
   padding: 0px 0px 0px 60px;
 }
 #header p {
   color: #fff;
   padding: 10px 0px 0px 60px;
 }
 #maincol {
   background-color: #BAC6DE;
   position: relative;
   width: 1395px;
   height: 800px;
   padding: 0px 0px 0px 0px;
   Margin: 0px 0px 0px 0px;
 }
 #widgetcontainer {
   background-color: #00386B;
   position: relative;
   width: 1175px;
   height: 100%;
   Margin: 0px 0px 0px 0px;
   Padding: 0px 0px 0px 10px;
   Overflow: auto;
 }
 .widget {
   background-color: #BAC6DE;
   float: left;
   width: 200px;
   height: 100%;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 10px;
 }
 #result p {
   color: #000;
 }
 #footer h2 {
   color: fff;
   padding: 0px 0px 0px 0px;
 }
 #footer p {
   color: fff;
   padding: 0px 50px 0px 60px;
   font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
   font-size: 120%;
   margin-right: 2px;
   margin-top: 8px;
 }
 /* ******************************************************************** */
 /* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
 /* ******************************************************************** */
 .clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility;
   hidden;
 }
 .clearfix {
   display: inline-block;
 }
 /* Hides from IE-mac \*/
 * html .clearfix {
   height: 1%;
 }
 .clearfix {
   display: block;
 }
 /* End hide from IE-mac */
 /* ******************************************************************** */
 /* Styling for widgets hover       */
 /* ******************************************************************** */
 .current {
   color: #00386B;
   display: block;
 }
 .imgHover {
   display: inline;
   position: relative;
 }
 .imgHover .hover {
   display: none;
   position: absolute;
   z-index: 1;
 }
 .hover {
   height: 575px;
   width: 200px;
   background: #BAC6DE;
 }
 .hover a {
   display: block;
   padding: 2px;
   font-size: 80%;
   padding-left: 5px;
 }
 .hover a:link {
   /* Applies to all unvisited links */
   text-decoration: none;
   font-weight: none;
   background-color: #BAC6DE;
   color: #fff;
 }
 .hover a:hover {
   /* Applies to links under the pointer */
   text-decoration: none;
   font-weight: bold;
   background-color: #BAC6DE;
   color: #fff;
 }
 .input {
   border: 2px inset #fff;
   background: #eee;
   height: 30px;
   margin-bottom: 40px;
 }
 .input:hover {
   border: 2px solid #f00;
   background: #ff6;
 }
 .button {
   display: none;
 }
 label {
   display: block;
   width: 150px;
   float: left;
   margin: 2px 4px 6px 4px;
   text-align: right;
 }
 br {
   clear: left;
 }
 /* ******************************************************************** */
 /* Styling for console panel      */
 /* ******************************************************************** */
 a:focus {
   outline: none;
 }
 a.trigger {
   position: absolute;
   background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
   text-decoration: none;
   font-size: 16px;
   letter-spacing: -1px;
   font-family: verdana, helvetica, arial, sans-serif;
   color: #fff;
   padding: 4px 12px 6px 30px;
   font-weight: bold;
   z-index: 2;
 }
 a.trigger.left {
   left: 0;
   border-top-right-radius: 5px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 a.trigger.right {
   right: 0;
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -webkit-border-top-left-radius: 5px;
 }
 a.trigger:hover {
   background-color: #59B;
 }
 a.active.trigger {
   background: #666 url(../images/minus.png) 6% 55% no-repeat;
 }
 .panel {
   color: #CCC;
   position: absolute;
   display: none;
   background: #9E00F8;
   height: 800px;
   width: 800px;
   z-index: 1;
 }
 .panel.left {
   left: 0;
   padding: 26px 0px;
   border-top-right-radius: 15px;
   -moz-border-radius-topright: 15px;
   -webkit-border-top-right-radius: 15px;
   -moz-border-radius-bottomright: 15px;
   -webkit-border-bottom-right-radius: 15px;
   border-bottom-right-radius: 15px;
 }
 .panel p {
   font-size: 11px;
 }
<!doctype html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>Hub Page</title>
  <meta charset="utf-8" />
  <meta generator="csscreator.com" />

  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
    <![endif]-->

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>



  <script>
    $(function() {
      $(".imgHover").hover(function() {
        $(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
      }, function() {
        $(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
      });
    });
  </script>

  <script type="text/javascript">
    $(document).ready(function() {

      // default settings
      // $('.panel').slidePanel();

      // custom settings

      $('#panel2').slidePanel({
        triggerName: '#trigger1',
        triggerTopPos: '0px',
        panelTopPos: '0px'
      });

    });
  </script>

  <SCRIPT LANGUAGE="JavaScript">
    function ClipBoard() {
      holdtext.innerText = copytext.innerText;
      Copied = holdtext.createTextRange();
      Copied.execCommand("RemoveFormat");
      Copied.execCommand("Copy");
      alert("Template Copied");
    }
  </SCRIPT>

  <!-- Please link back to http://csscreator.com -->
  <link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>

<body>
  <div id="pagewidth">
    <div id="header">

      <IMG SRC="images/header.jpg" align=right>
      </a>

      <TEXTAREA ID="holdtext" STYLE="display:none;">
      </TEXTAREA>
      <SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
    http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>

      </P>
    </div>
    <div id="wrapper" class="clearfix">
      <div id="maincol">
        <div class="widget">
          <div class="hover">

            <!----------START NAVIGATION PANEL----------->
            <a href="TEAM HOME.htm" class="current">TEAM HOME</a>
            <a href="BASE.htm">KANA IQ</a>
            <a href="EMAIL DRAFTS.htm">EMAIL DRAFT</a>
            <a href="TEAM DOCUMENTS.htm">TEAM DOCUMENTS</a>
            <!----------END NAVIGATION PANEL----------->

          </div>
        </div>

        <div id="widgetcontainer">

          <!----------Start Team Home Links----------->
          <font size=5><strong><p>Bulletin Board. . .</p></strong></font>
          <P>Please Enter Your First Bulletin Here . . .</P>
          <!----------End Team Home Links----------->

        </div>

        <br clear=all>

      </div>
    </div>
  </div>
  </div>
</body>
</html>

请有人告诉我为什么右手DIV（深蓝色）中的文字低于左DIV（浅蓝色）中的文字？

我已经更改了填充，边距但我无法正确排列。

4 个答案:

答案 0 :(得分：1)

你必须注意浏览器有各自的预定义元素。

As＆＃34;公告栏......＆＃34;是一个p标签，浏览器会将自己的边距添加到该元素。大多数开发人员将使用重置样式表来避免这些问题。您也可以将margin: 0px;添加到p标记中，它可以解决问题。

答案 1 :(得分：0)

<p>的{​​{1}} margin。只需使用开发控制台检查代码即可。 

1em

这将解决它。但请使用normalize.css修复浏览器特定的默认值。

答案 2 :(得分：0)

试试这个：您的问题是p代码的边距。它有默认保证金。因此，您可以通过以下代码重置p标记的边距

在css中添加p{margin:0;}代码

答案 3 :(得分：0)

这是因为默认情况下大多数浏览器会在段落标记中添加一些边距和填充。您可以使用css重置文件，也可以自己删除边距。 

#widgetcontainer p{
margin: 0px;
}
相关问题
最新问题