Question

为什么我的灰色div只显示一半？这是我的代码： -

<!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>

Answer 1

在我看来，这是一个由浮动元素创建的经典“崩溃父母”问题。在您的情况下，它是表中的align=left属性。

删除此属性是最简单的解决方案，否则有四种CSS解决方案，尽管其中一种主要适用于您：

将css overflow:hidden添加到主div中，或者添加一个明确的浮点数，例如<div style="clear:both;"></div>是你主要div中的最后一件事。

本文解释了理论和其他两种可能的解决方案：

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

Answer 2

问题出在表标记中的凌乱align="left"属性中。查看正常版本：http://www.jsfiddle.net/pereskokov/UMUFt/1/

Answer 3

我可以知道圆桌会议吗？我认为div是浮动的。当你使用float div时，你需要“清除：两个”div来清除float元素，这样另一个标签也不会浮动。

Answer 4

首先，您指定的是Transitional DTD级别，它是最高级别，需要一个格式良好的文档，您只使用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>

简单的HTML问题让我感到沮丧

4 个答案: