格式化问题

时间:2015-11-09 23:40:19

标签: javascript html css

我目前正在尝试锻炼如何集中我的网页。目前我正在使用表格中的表来分解我的网站,但我希望我的页面的前1/3遍及整个页面,但另外2/3留在中心。谢谢你的帮助! (见下面的代码)

            <!DOCTYPE html>
            <html>
                <head>
                    <title>R.P.E Limited</title>
                        <style>
                                .container {
                                  float: center
                                }

                                .left {
                                  float:left;
                                }

                                .right {
                                  float:right;
                                }

                                html, body{
                               height: 100%;
                               min-height: 100%;
                                }


                                .top {
                                height: 10%;
                                }

                                .mid {
                                height: 45%;
                                }

                                .bot {
                                height: 45%;
                                }

                                body {
                                width:90%;
                                }
                        </style>
                </head>
                    <body>
                        <table height="100%" width=250%>
                          <tr>                                                      <!--Webpage start-->                            
                            <td>                                                    <!--LEAVE BLANK-->
                            </td>
                                <td>                                                <!--All code goes in here-->
                                    <table height="100%" width=100%>


                                        <td class="left" width=20%>                 <!--Left blank-->
                                        </td>



                                        <td class="container" width=60%>

                                            <table class="top" height="100%">       <!--THE PAGE STARTS HERE-->
                                                <tr><td>Top</td></tr>               <!--TOP-->
                                            </table>

                                            <table class="mid" height="100%">
                                                <tr><td>Mid</td></tr>               <!--MID-->
                                            </table>

                                            <table class="bot" height="100%">
                                                <tr><td>Bot</td></tr>               <!--BOTTOM-->
                                            </table>
                                        </td>




                                        <td class="right" width=20%>                <!--Right blank-->
                                        </td>

                                    </table>
                                </td>                                               <!--All code ends here-->
                            <td>                                                    <!--LEAVE BLANK-->
                            </td>
                          </tr>
                        </table>                                                    <!--Webpage end-->
                    </body>
            </html>

1 个答案:

答案 0 :(得分:0)

正如人们所提到的那样使用样式是正确的方法。表格不应用于纯粹的布局目的。

这应该是你正在寻找的东西:

<style>

.maincanvas {
  margin:0px auto;
  width: 600px
}

</style>


<div class="maincanvas">

   <p>This container will be centered with a width of 600px</p>

</div>