
你要的是不是这种效果
类名为sub的div在类名为parent的div的底部。
方法:
1设置父div属性position: relative;
2设置子div属性position: absolute; buttom: 0;
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
parent{position: relative; background: #ccc;width:600px; height: 1200px;}
sub{position: absolute; bottom: 0; background: red;width: 200px;height: 200px;}
</style>
</head>
<body>
<div class="parent">
<div class="sub">
</div>
</div>
</body>
</html><html>
<head>
<title>Test</title>
</head>
<body>
<div style="height:100%;width:100%;background-color:#ccc; margin-bottom: -30px">
<div style="height: 100%; padding-bottom: 30px;float: left">
Your Content
</div>
</div>
<div style="width:100%;background-color:#E00;height:30px;margin-top:-30px;">
Your Footer
</div>
</body>
</html><body>
<div id="div1" style="width:100px; height:100px; background:#ccc";></div>
</body>
<script>
var oDiv = documentgetElementById('div1');
oDivstyleposition = 'fixed';
oDivstyletop = '20px';
oDivstyleleft = '20px';
</script>
主要思想就是,在js中修改div的位置。所有的赋值,都可以计算后再传值,这样就不想CSS中只能写一个值了。
可以用css定位把一个div放到另一个div右下角。
1、新建html文档,在body标签中添加一个div标签,然后在这个div标签内再添加一个div标签,为外面的div标签添加“container”类,里面的div标签添加“inner”类:
2、在head标签内添加style标签,为“container”类和“inner”类分别设置样式,这时默认情况下内div在外div的左上角:
3、为外div添加样式“position: relative;”,为内div添加样式“position: absolute;right: 0;bottom: 0;”,这时内div将会在外div的右下角:
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)