我是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
虽然这不是我想做的,但它是有效的