如果不想用这种方法,也有比较复杂的实现手段。假设上面html的代码是是这样的:
广东科技学院??
那么可以这样来定义它的css
.footer{height:100pxposition:relative}
.center{position:absolutebottom:0text-align:center}
给文字做一下绝对定位,这样它的父元素无论高度是怎样,都可以向下对齐了。
改一下网站编码为:<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />即将utf-8改为bg2312即可
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
font-size: 12px
}
#div1 {
width: 400px
margin: 20px auto
/*border:1px solid red*/
border-top: 1px solid blue
border-right: 1px solid blue
border-left: 1px solid blue
border-bottom: 1px solid red
height: 40px
position: relative
}
#div1 div{
width: 80px
height: 30px
font-size: 14px
line-height: 30px
text-align: center
float: left
background: #00FF00
color: #FFFFFF
border-left: 1px solid #eee
margin-left: 10px
position: absolute
bottom: 0
}
#div1 .mydiv2 {
left: 90px
}
#div1 .mydiv3 {
left: 180px
}
</style>
</head>
<body>
<div id="div1">
<div>建设文明</div>
<div>新浪微博</div>
<div>意见征求</div>
</div>
</body>
</html>