Question

我是网页设计风格和CSS的新手。我读到用于布局的表的使用是一种不好的做法。因此，我尝试使用<br\>，div和float创建此布局。

enter image description here

问题： 一旦应用了<br\>，我就无法呈现上半部分（类似于在控制台中打印一次\n，我们无法转到上面一行）。

因此，任何人都可以提供另一种设计网页的方式，而不使用<table>和<br>标记。

Answer 1

看起来像grid system的完美示例用法。

如果不使用网格系统，您只需对每个div使用float: left，就可以了。

Answer 2

通过向DIV添加css，您可以获得一些很棒的布局（即您在这里寻找的三种列样式），尝试使用此脚本来帮助您入门： http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Answer 3

这是一个简单的例子，

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>
    <style type="text/css">

        .content{
            width:150px;
            height:100px;
            border:1px solid blue;
        }
        .content .text{
            display:block;
            border:1px solid red;
        }   
    </style>

</head>
<body>

    <div class="content">

        <div class="text">
            text here
        </div>

        <div class="text">
            another text here
        </div>

        <div class="text">
            yet another text here
        </div>


    </div>

</body>
</html>

代码说明

我所做的是在text父div内包裹content div，并为父div分配固定的宽度和高度。

现在child div我刚刚使用了display:block并查看了结果。您无需使用<br/> display:block;即可为您执行此操作。

现在 display：block; 的含义是什么，所以它只是告诉浏览器允许特定的DOM占用父div的整个宽度。

不使用表对内容（布局）进行逻辑分组

3 个答案: