我是HTML新手。我想做如下简单的布局设计:

-------------------------------------
                                    |
-------------------------------------
    |                           |   |
    |                           |   |
    |                           |   |
    |                           |   |
    |---------------------------|   |
____|_________footer____________|___|

但是我的页脚没有在左菜单和右菜单之间调整。它在左下和右下菜单。
下面是我的HTML代码:
<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background-color: aqua;
    position: relative;
}

#header {
    height: 5%;
    background-color: #FFA500;
}

#leftmenu {
    background-color: #FFD700;
    height: 90%;
    width: 20%;
    float: left;
}

#rightmenu {
    background-color: #FFD700;
    height: 90%;
    width: 10%;
    float: left;
}

#content {
    style ="background-color: #EEEE12;
    height: 85%;
    width: 70%;
    float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
</title>
</head>
<body>
    <div id="container" class=".container">

        <div id="header" class=".header">
            <h1>Main Title of Web Page</h1>
        </div>

        <div id="leftmenu" class=".leftmenu">
            <b>Menu</b><br> HTML<br> CSS<br> JavaScript
        </div>

        <div id="content" class=".content">Content goes here</div>

        <div id="rightmenu" class=".rightmenu">
            <b>DashBoard</b><br> Recent<br> Saved Search
        </div>

        <div id="footer"
            style="background-color: #FFA500; clear: both; text-align: center;">
            Copyright © W3Schools.com</div>

    </div>


</body>
</html>

最佳答案

你有一些问题
首先是在一个<style>标签中混合内联CSS和CSS。别这样,99.9%的时候把它放在标签上
其次,在css的一行中有一个<style>,可能是从复制中删除的,所以我删除了它
第三,您需要设置页脚的宽度。因为两边的div都是30%的百分比,所以我将页脚改为style="...
第四,你需要把它放在左边div的右边,你可以使用width:70%,左边div的宽度
最后,您需要将页脚放在左右div旁边。通过使用浏览器inspect元素,我看到页脚是20px。因此,我将两边的div都设为margin-left:20%,这样页脚上的margin-bottom:-20px就不会超过这两个元素
Demo
虽然这不是我想做的,但它是有效的

10-05 20:58
查看更多