2010-11-29 45 views
1

爲什麼我的灰色div只顯示一半?這是我的代碼: -簡單的html問題讓我很沮喪

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<body> 
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white;background: #212121;" class="round" > 
    <center> 
     <h4 style="font-family: Verdana;font-style: italic;">Alumni Activities</h4> 
    </center> 
    <div style="margin-left: 10px;"> 
     <p> 

      The institution has an alumni association that performs various activities to disseminate knowledge among students regarding Education, Technology, Trends and Industry. Apart from this, it organizes technical competitions for students to effectively develop their competitive skills and arranges alumni programs that promote effective networks amongst its members.</p> 
     <p> 
      Events organized by Alumni Association of are as given below:</p> 
     <table align="left" border="1" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td valign="top" width="40"> 
         <p> 

          1.</p> 
        </td> 
        <td valign="top" width="363"> 
         <p> 
          <strong>Event Name: </strong>Alumni Meet 2010</p> 
         <p> 
          <strong>Date of Event: </strong> 27-Feb-2010</p> 

         <p> 
          <strong>Purpose: </strong> Annual General Meeting and Get together</p> 
         <p> 
          <strong>Number of Alumni Present: </strong> 75</p> 
        </td> 
       </tr> 

       <tr> 
        <td valign="top" width="40"> 
         <p> 
          2</p> 
        </td> 
        <td valign="top" width="363"> 
         <p> 
          <strong>Event Name: </strong> Expert Talk</p> 

         <p> 
          <strong>Name of the Alumni: </strong> Mr. Nachiket Patel, Essar Ltd.</p> 
         <p> 
          <strong>Date of Event: </strong> 22-Sep-2009</p> 
         <p> 
          <strong>Purpose: </strong> To enhance the knowledge of students</p> 

        </td> 
       </tr> 

     </table> 
     <p> 
      &nbsp;</p>  </div> 
</div> 
</div> 

+4

驗證你的代碼 - http://validator.w3.org/#validate_by_input – 2010-11-29 17:22:40

+0

@Jason McCreary: - 我做了,它顯示它的錯誤是ckeditor。這個表代碼是由ckeditor生成的,我只是將它粘貼到新的html頁面中,並將其發佈到此處;) – TCM 2010-11-29 17:25:25

回答

3

在我看來像經典的「崩潰父」的問題,通過一個浮動元素創建。在你的情況下,它是表上的align=left屬性。

刪除此屬性是最簡單的解決方案,否則有四個CSS的解決方案,雖然主要的兩個人應該爲你工作:

無論是CSS overflow:hidden添加到您的主要格,或添加浮法,例如<div style="clear:both;"></div>作爲您主要div中的最後一件事。

本文介紹的理論和另外兩個可能的解決方案:

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

1

我可以知道這個回合類?我認爲div是浮動的。當你使用float div時,你需要「清除:」div來清除浮動元素,這樣另一個標記也不會浮動。

1

首先,您要指定最高級別的過渡DTD級別,並且要求使用除HTML格式之外的文檔,您只能使用HTML元素。此級別接受絞盤,其次是div已關閉但沒有打開,第三刪除您表的align =「left」屬性:

<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white; background:#212121;" 
     <center> 
     <h4 style="font-family: Verdana;font-style: italic;">Title</h4> 
     </center> 
    <div style="margin-left: 10px; " > 

    <table border="1" cellpadding="0" cellspacing="0"> 
     <tr><td/>Cell Content</td></tr> 
    </table> 
</div>