1

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

在此处输入图像描述

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

那么，任何人都可以提供另一种设计页面的方式，而不使用<table>和<br>标签。

4

3 回答 3

2

看起来像是网格系统的完美示例用法。

不使用网格系统，你可以只使用float: left每个 div 应该没问题。

于 2013-06-17T11:58:13.560 回答
1

通过将 css 添加到 DIV，您可以获得一些很棒的布局（即您在此处寻找的三列样式），请尝试这篇文章以帮助您入门： http ://www.htmlgoodies.com/beyond/css/article.php /3642151/CSS-Layouts-Without-Tables.htm

于 2013-06-17T11:59:22.420 回答
1

这是这样做的简单示例，

<!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;will do it for you。

现在display:block;的含义是什么？所以它只是告诉浏览器允许那个特定DOM的东西占据 parent 的整个宽度div。

于 2013-06-17T12:08:46.173 回答