html - 如何设置我的博客以指定每个元素的大小？

Question

我希望我的网页看起来像这样，但是我不确定如何限制每个元素，即标题、内容、导航和页脚，以便它们的排列如下图所示？

我会指定最大宽度等吗？

Answer 1

我假设您正在使用div？

如果是这样的话：

#header{
    width: 100%;
}

#navigation{
    width: 30%; // example
    float: left;
}

#content{
   width: 70%; // example, navigation and content must = 100
   float: left;
}

#footer{
   width: 100%;
}

无需指定 min-max- 除非您想确保，例如，导航是页面宽度的 30%，除非这会使其小于 200px，否则您将使用：

#navigation{
    width: 30%; // example
    min-width: 200px;
    float: left;
}

Answer 2

试试这个：

<style type="text/css">
            table
            {
                width: 100%;
                border:1px solid black;
            }
            .col1
            {
                width: 25%;
                border-right:1px solid black;
            }
            .col2
            {
                width: 75%;
            }
            .header
            {
                border-bottom:1px solid black;
            }
            .footer
            {
                border-top:1px solid black;
            }
    </style>

    <table>
            <tr>
                <td colspan="2" class="header">
                    header
                </td>
            </tr>
            <tr>
                <td class="col1">
                    col1
                </td>
                <td class="col2">
                    col2
                </td>
            </tr>
            <tr>
                <td colspan="2" class="footer">
                    footer
                </td>
            </tr>
        </table>