Question

我知道我做错了。目前，我使用Tables来格式化我的屏幕。不好，我知道。我正在研究学习Twitter Bootstrap，但是对于一个测试网站，我只是试图摆脱桌子并尝试使用DIV进行布局。

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

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

我如何使用DIV来执行此操作？ DIV是正确的想法吗？我看到Twitter Bootstrap使用了<SPAN> - 但是我还有几天没有掌握它。

Answer 1

您可以使用divs，如果您想切换，这是一个好主意，您可以根据需要使用display属性

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

twitter-bootstrap有一些类pull-left和pull-right看了一下，我建议你使用divs而不是表格！

Fiddle Demo

Answer 2

所以，我从其他人那里走了一条完全独立的路线。首先，这是我想要你想要的例子，但如果这不正确，请告诉我。

DEMO

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

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

然后附带一些CSS代码：

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

以上代码产生了JsFiddle输出。要阅读的内容是显示方法“表格”，它将告诉您更多关于这个CSS技巧为何真正起作用的原因。这可以在Almanac。

中找到

另一个好好阅读的内容是为什么一个列表可能比一个表更好......在这个stack问题中找到了一个有利有弊的好论据。

最后，我鼓励你在这个页面上玩任何一个JsFiddle，你最终可能找到一个真正适合你所寻找的完美组合，给你独特的感觉:)如果你对我有任何疑问演示，只需在下面发表评论，我会尽力为您解答：）

Answer 3

试试这个布局

<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Basic Finance</a>
<div class="pull-right">
@Html.Partial("_Login", new LoginModel())
</div>
</div>
</div>

Answer 4

您可以使用

display:table;

<table>

display:table-row;

<tr>

display:table-cell;代表<td> 以div格式

here is a demo（它有css表vs html表 - 比较并检查你的理解）

CSS 与

一起玩

body{
     height:100%;
}
#main{
    height:100%;
    width:100%;

}
.table{
    display:table;
    width: 100%;
}
.tr{
    display:table-row;
}
.td{
    display:table-cell;
}

Answer 5

只有普通的div，你可以使用float属性让它们彼此相邻

<div>
<div class="table">
    <div class="left">
        <h1>Basic Finance</h1>
    </div>
    <div class="right">      
        @Html.Partial("_Login", new LoginModel())
    </div>
</div>      
@RenderBody()
</div>

然后你可以用CSS的方式设置样式，例如：

.left{float: left;width: 50%;;height:100%;text-align:left;}
.right{height:100%; text-align:right;padding-top: 30px;}
.table{height: 75px;}

此代码的输出： http://jsfiddle.net/7Qv8r/1/

干杯

Answer 6

你可以试试这个

Check Fiddle here

<div>
        <div style="width: 100%;">
            <div style="float: left">
                <h1>
                    Basic Finance</h1>
            </div>
            <div style="float: right; padding-top: 30px;">
                @Html.Partial("_Login", new LoginModel())</div>
        </div>
        <div style="clear: both">
        </div>
        <hr />
        @RenderBody()
    </div>

祝你好运新年快乐......：）

页面布局，Div而不是表格

6 个答案: