Question

我创建了一个页面。其中包含三件事。

电子邮件邀请
视频
Facebook喜欢插件

我创建了表结构并将它们放在了列中。我觉得有些不对劲。元素的位置不会保持不变。

最初加载页面时，只有邀请框出现在中心，视频出现在右侧。

在插件加载的几秒钟内，中间部分的邮件邀请框向下移动。

结构中是否有任何逻辑错误？

<!DOCTYPE html>
<head>
    <title>
        _/Invitation@xyz\_
    </title>    
    <style>
            .header{
                background-color: #61B329;
                color: #FFF;
                margin-top: 0px !important;
                margin-bottom: 20px;
                padding-bottom: 9px;
            }

            .middle{
        align:left;
            }

            .left{

            }
            .page-header-text {
                padding-left: 15px;
                padding-top: 20px;
                padding-bottom: 10px;
                margin: 0px;
            }


            html, body { margin: 0; padding: 0; border: 0 }
        </style>
</head>
<body onload="start();">
    <div class="page-header header">
    <h1 class="page-header-text">that test</h1>
    </div>
        <table border="0.1" width="100%">
    <tr>
        <td style="width:20%">
            <div class="left">      
            </div>
        </td>               
        <td style="width:60%">          
            <div class="middle">
                <div id="main">
                    <form action="./submit.php" method="post">
                        <div class="bar">
                            <input id="input" placeholder="     E-mail"  name="email" type="text" />
                            <input id="but"" type="button" value="Go !!!"/>
                        </div>
                    </form>
                </div>      
            </div>
        </td>
        <td style="width:20%">                  
            <div class="right">
                <video width="400" height="360" controls preload="none">
                    <!-- MP4 must be first for iPad! -->
                    <source src="1.MP4" type="video/mp4" /><!-- WebKit video    -->
                    <source src="__VIDEO__.webm" type="video/webm" /><!-- Chrome / Newest versions of Firefox and Opera -->
                    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
                    <!-- fallback to Flash: -->
                    <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
                    <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
                    <param name="movie" value="__FLASH__.SWF" />
                    <param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
                    <!-- fallback image. note the title field below, put the title of the video there -->
                    <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
                         title="No video playback capabilities, please download the video below" />
                    </object>
                </video>                
            </div>
        </td>       
    </tr>
    <script type="text/javascript" src="./js/main.js"></script>
</body>
</html>

验证CSS结构作为标准规则

0 个答案: