页面布局，用 Div 代替表格 [英] Page layout, Divs instead of Tables

问题描述

我知道我做错了.目前，我使用表格来格式化我的屏幕.不好，我知道.我正在考虑学习 Twitter Bootstrap，但对于测试站点，我只是想摆脱表格并尝试使用 DIV 进行布局.

目前，我正在尝试制作一个页眉，左侧显示标题，右侧显示登录框.

<表格样式="宽度:100%;"><tr style="vertical-align: top"><td style="text-align: left"><h1>基础财务</h1></td><td style="text-align: right">@Html.Partial("_Login", new LoginModel())</td></tr><小时/>@RenderBody()

我如何使用 DIV 来做到这一点?DIV 是正确的想法吗?我看到 Twitter Bootstrap 使用 <SPAN> - 但我距离掌握它还有几天时间.

解决方案

所以，我走了一条与其他人完全不同的路线.首先，这是我认为您想要的示例，但如果这不正确，请告诉我.

演示

现在，让我为您分解一下.我首先通过登录获取您所说的内容，并在同一行或同一行上使用某种类型的标题以及登录表.这是通过以下 HTML 代码完成的:

<h1 style="float:left;">示例文本 </h1><form action="" method="post"><ul id="regis_ul"><li id="regis_li"><标签><跨度>用户名:</span><span><input type = 'text' name='username' id='username' value = ></span><li id="regis_li"><标签><跨度>密码:</span><span><input type='password' name='password'id='password' value=''></span><input type='submit' name='submit' value='Register'></表单>

然后附有一些CSS代码:

#regis_ul {显示:表；}#regis_li {显示:表行组；}跨度 {显示:表格单元格；}标签 {显示:表格行；}形式{浮动:对；}

上面的代码是产生 JsFiddle 输出的原因.需要阅读的是显示方法table"，它会告诉你更多关于为什么这个 CSS 技巧真正起作用的信息.这可以在年鉴中找到.

另一件值得一读的事情是为什么一个列表可能比一个表格更好，在这个 stack 问题在这里.

最后，我鼓励您使用此页面上的任何 JsFiddle，您最终可能会找到真正适合您所寻找的东西的完美组合，给您独特的感觉:) 如果您对我的有任何疑问演示，请在下方评论，我会尽力为您解答:)

I know I am doing it all wrong. At the moment, I used Tables to format my screen. Bad, I know. I am looking at learning Twitter Bootstrap, but for a test site, I am just trying to move away from Tables and try use DIVs for layout.

At the moment, I am trying to make a page header that shows a title on the left, and a login box on the right.

<div>
     <table style="width: 100%;">
         <tr style="vertical-align: top">
             <td style="text-align: left">
                  <h1>Basic Finance</h1>
             </td>
             <td style="text-align: right">@Html.Partial("_Login", new LoginModel())</td>
          </tr>
     </table>
     <hr />
     @RenderBody()
</div>

How can I use DIVs to do this? Are DIVs the right idea? I see Twitter Bootstrap uses <SPAN> - but I am days away from getting to grips with it.

解决方案

So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.

DEMO

Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:

<div id="wrapper">
    <h1 style="float:left;"> Example Text </h1>
    <form action="" method="post">
        <ul id="regis_ul">
            <li id="regis_li">
                <label><span> Username: </span>
    <span><input type = 'text' name ='username' id ='username' value = ></span>

                </label>
            </li>
            <li id="regis_li">
                <label> <span> Password: </span>
    <span><input type = 'password' name ='password' id ='password' value ='' ></span>

                </label>
            </li>
            <input type='submit' name='submit' value='Register'>
    </form>
</div>

Which is then accompanied by some CSS code:

#regis_ul {
    display:table;
}
#regis_li {
    display:table-row-group;
}
span {
    display: table-cell;
}
label {
        display: table-row;
}
form{
    float: right;
}

The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.

Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.

Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)

这篇关于页面布局，用 Div 代替表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！