如何在没有表格的情况下进行布局？

时间：2015-05-15 02:43:31

标签： html css

我使用表格进行布局，但我必须使用DIV，因为我的表格中有表格。使用表格呈现代码是错误的，因为它有表单，表单功能正在经历使用表格的不必要的副作用，因此我必须使用DIV代替布局。你能帮助我如何在没有桌子的情况下实现布局吗？

enter image description here

这是我的代码fiddle。 html是

<body>

<div id="wrapper">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- v2 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:15px"
         data-ad-client="ca-pub-7211665888260307"
         data-ad-slot="9119838994"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    <div id="border1"></div>

<div id="searchbox">

<form id="search_form" action="/account/do_login" method="post">


        <div class="div-table">

            <div class="div-table-row">
                <div class="div-table-col">LOG IN</div>
                <div class="div-table-col"><input name="email" size="35" title="email" type="text"
                        ></div>
                <div class="div-table-col"><input name="password" size="35" title="password" type="password"
                        ></div>
                <div class="div-table-col"> <input value="Login" type="submit"></div>   <div class="div-table-col"> </div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col logintext">YOUR E-MAIL</div>
                <div class="div-table-col logintext">PASSWORD</div>
            </div>
    </form>

    <form autocomplete="off" id="create_user" action="/create/" method="post">

        <div class="div-table">

            <div class="div-table-row">
                <div class="div-table-col">CREATE ACCOUNT</div>
                <div class="div-table-col"><input name="email" size="35" title="email" type="text"
                        ></div>
                <div class="div-table-col"><input name="password" size="35" title="password" type="password"
                        ></div>
                <div class="div-table-col">  <input value="Create Account" type="submit"></div>
                <div class="div-table-col"> </div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col logintext">YOUR E-MAIL</div>
                <div class="div-table-col logintext">PASSWORD</div>
            </div>

            <div class="div-table-row">
                <div class="div-table-col">OR LOG IN WITH</div>
                <div class="div-table-col"><a href="/auth/google"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></a></div> <div class="div-table-col"><a href="/auth/linkedin"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></a></div>
                <div class="div-table-col"><a href="/auth/yahoo"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </a></div>  <div class="div-table-col"><a href="/auth/facebook"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></a></div>

            </div>

        </div>

</form>


</div>
    <div id="recover"><a href="/passwordreset/"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></A></div>



</div>


</body>
</html>

过了一会儿，我尝试了一下根本不起作用的引导程序：

<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="description"
          content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
    <meta name="googlebot" content="noarchive">
    {% if cursor %}
    <link rel="next" href="/delhi/?o=2">
    {% endif %}
    <link rel="canonical" href="/q">

    <title>Login / Create</title>
    <!-- CSS INCLUDES: -->

    <link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <!-- HEADEXTRAS: -->

    <link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
    <!--
        <link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
        <link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
        <link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
        <link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
            <link href="https://plus.google.com/123122342342345" rel="publisher">-->

    <!-- JAVASCRIPTS: -->
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/static/js/common.min.js"></script>
    <script type="text/javascript" src="/static/js/arrays_v2.js"></script>
    <script type="text/javascript" src="/static/js/searchbox.min.js"></script>

</head>
<body>
{% include "kooltopbar.html" %}


<div id="wrapper">
 {% if request.host == "www.koolbusiness.com"  %}
<a href="/">
    <h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &amp;
        selling in india</h1></a>
{% endif %}


    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- v2 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:15px"
         data-ad-client="ca-pub-7211665888260307"
         data-ad-slot="9119838994"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    <div id="border1"></div>

<div id="searchbox">
    <div class="container">
<form id="search_form" action="/account/do_login" method="post">

    <div class="row">
        <div class="col-md-1">LOG IN WITH</div>
        <div class="col-md-1"><a href="/auth/google"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></a></div>
        <div class="col-md-1"> <a href="/auth/linkedin"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></a></div>
        <div class="col-md-1"><a href="/auth/yahoo"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </a></div>
        <div class="col-md-1"><a href="/auth/facebook"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></a></div>

    </div>
    <div class="row">
        <div class="col-md-1">LOG IN</div>
        <div class="col-md-1"><input name="email" size="35" title="email" type="text">
        </div>
        <div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
        <div class="col-md-2"><input value="Login" type="submit"></div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-4</div>
        <div class="col-md-2 logintext">YOUR E-MAIL</div>
        <div class="col-md-2 logintext">PASSWORD</div>
    </div>

    </form>

    <form autocomplete="off" id="create_user" action="/create/" method="post">
        <div class="row">
            <div class="col-md-1">CREATE ACCOUNT</div>
            <div class="col-md-1"><input name="email" size="35" title="email" type="text">
            </div>
            <div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
            <div class="col-md-2"><input value="Create Account" type="submit"></div>
        </div>


</form>

</div>
</div>
    <div id="recover"><a href="/passwordreset/"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></A></div>



</div>


</body>
</html>

修改

我最终做到这一点的方式是使用twitter bootstrap，我很高兴。但是将所有内容重新排列到DIV并没有解决使用表单自动完成的问题所以我不得不求助于一个肮脏的技巧来清除创建字段的表单。奇怪的是，我必须重新启动所有内容才能使twitter引导工作。

enter image description here 

<div id="mybox">
    <div class="container">
<form id="search_form" action="/account/do_login" method="post">

    <div class="row">
        <div class="col-md-1">LOG IN WITH</div>
        <div class="col-md-2"><a href="/auth/google"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></a></div>
        <div class="col-md-2"> <a href="/auth/linkedin"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></a></div>
        <div class="col-md-2"><a href="/auth/yahoo"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </a></div>
        <div class="col-md-2"><a href="/auth/facebook"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></a></div>

    </div>
    <div class="row">
        <div class="col-md-1">LOG IN</div>
        <div class="col-md-3">
            <input name="email" size="35" title="email" type="text">
        </div>
        <div class="col-md-3">
            <input name="password" size="35" title="password" type="password">
        </div>
        <div class="col-md-2">
            <input value="Login" type="submit">
        </div>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-3 logintext">YOUR E-MAIL</div>
        <div class="col-md-3 logintext">PASSWORD</div>
    </div>

    </form>

    <form autocomplete="off" id="create_user" action="/create/" method="post">
        <input style="display:none">
        <input type="password" style="display:none">
        <div class="row">
            <div class="col-md-1">CREATE ACCOUNT</div>
            <div class="col-md-3">
                <input name="email" id="email" size="35" autocomplete="off" title="email" type="text" value="">
            </div>
            <div class="col-md-3">
                <input name="password" id="password" size="35" autocomplete="off" title="password" type="password" value="">
            </div>
            <div class="col-md-2">
                <input value="Create Account" type="submit">
            </div>
        </div>


</form>
</table>
</div>
</div>
    <div id="recover"><a href="/passwordreset/"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></A></div>

3 个答案:

答案 0 :(得分：1)

正如您可能发现的那样，表格不应用于布局。事实上，它们只应用于显示数据。

就使用div构建布局而言，这是开始时需要了解的内容。

使用宽度，最大宽度和最小宽度来创建直观且响应迅速的布局。

使用百分比，em和vh代替像素。

考虑学习和使用浮动，并清除：两者都有助于响应式布局。

另外，请考虑使用twitter bootstrap CSS framework。特别是网格功能。您可以在几分钟内学习并使用它。

我希望这会有所帮助。

答案 1 :(得分：1)

这种布局非常简单，你使它变得比它需要的复杂得多。我删除了所有谷歌广告的东西，你可以添加回来，但这里有更多的标记，而不是你需要和更多的垃圾。

这是一个快速的小提琴，我在大约10分钟内聚集在一起，为您提供基本布局。我相信你可以将它调整到你需要的确切尺寸。

http://jsfiddle.net/fop9vLjh/1/ 

<style type="text/css">
    body { font-family: sans-serif; }
    #wrapper { width: 900px; margin: 0 auto; }
    div { margin-top: 15px; }
    #login-box { background-color: #ffc801; padding: 10px; }
    span { float: left; width: 10em; }
    #recover { float: right; }
    a { text-decoration: none; }
    input[type='text'],input[type='password'] { width: 18em; }
    .form-field { width: 15em; display: inline-block; vertical-align: top; margin-top: 0; }
    label { display: block; font-size: small; }
</style>

<div id="wrapper">
    <div id="login-box">
        <div id="login">
            <span>LOGIN</span>
            <form action="/account/do_login" method="post">
                <div class="form-field">
                    <input name="email" type="text"/>
                    <label for="email">YOUR EMAIL</label>
                </div>
                <div class="form-field">
                    <input name="password" type="password"/>
                    <label for="password">PASSWORD</label>
                </div>
                <button type="submit" value="Login">Login</button>
            </form>
        </div>
        <div id="create">
            <span>CREATE ACCOUNT</span>
            <form autocomplete="off" id="create_user" action="/create/" method="post">
                <div class="form-field">
                    <input name="email" type="text"/>
                    <label for="email">YOUR EMAIL</label>
                </div>
                <div class="form-field">
                    <input name="password" type="password"/>
                    <label for="password">DESIRED PASSWORD</label>
                </div>
                <button type="submit" value="Create">Create Account</button>
            </form>
        </div>
        <div id="alt-login">
            <span>OR LOG IN WITH</span>
            <input name="google" type="image" src="#"/>
            <input name="linkedin" type="image" src="#"/>
            <input name="yahoo" type="image" src="#"/>
            <input name="facebook" type="image" src="#"/>
        </div>
    </div>
    <div id="recover">
        <a href="">CLICK HERE TO RECOVER YOUR ACCOUNT</a>
    </div>
</div>

答案 2 :(得分：0)

对不起，但是它的html \ css基础知识。究竟你的问题在哪里？我只看到顶部黄色条的问题，可以通过以下方式修复：

<div ng-controller="myController">
    <div class="overflow-hidden ag-center" world-data info="target"></div>
</div>

但它仍然看起来很丑陋（：

相关问题
最新问题