Question

我不擅长为页面制作布局和设计，但我现在已经尝试了大约2个小时，如何使用div标签进行这种布局。它看起来像标题和正文被分成两半，而页脚只是底部的一个小条。任何人都可以提出我的想法吗？

Answer 1

以下html代码是2列简单布局。我认为这就是你要找的东西。

            <!doctype html>
            <html>
            <head>
                <title>This is simple css layout using divs.</title>
                <style>
                    *{
                        margin: 0;
                        padding: 0;
                    }

                    .header{
                        width: 100%;
                        height: 40px;
                        background-color: #aaaaaa;
                        padding: 10px;
                    }

                    .contain{
                        padding: 15px;
                    }

                    .leftContain{
                        width: 49%;
                        height: 300px;
                        background-color: green;
                        float: left;
                    }

                    .rightContain{
                        width: 49%;
                        height: 300px;
                        background-color: blue;
                        float: right;
                    }

                    p{
                        padding: 10px;
                    }

                    .footer{
                        width: 100%;
                        height: 40px;
                        background-color: #aaaaaa;
                        padding: 10px;
                    }

                    .clear{
                        clear: both;
                    }

                </style>
            </head>
            <body>
                <div class="container">

                    <div class="header">
                        <h4>Menu</h4>
                    </div>  <!-- end of header-->

                    <div class="contain">

                        <div class="leftContain">
                            <p>division 1</p>
                        </div>  <!-- end of leftContain -->

                        <div class="rightContain">
                            <p>division 2</p>
                        </div>  <!-- end of rightContain -->

                        <div class="clear"></div>

                    </div>  <!-- end of contain -->


                    <div class="footer">
                        <h4>footer</h4>
                    </div>  <!-- end of footer -->

                </div>  <!-- end of container -->
            </body>
            </html>

使用div标签的布局

1 个答案: