可以用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的右下角：
温馨提示：内容为网友见解，仅供参考
第1个回答 2016-11-12
借助CSS定位来实现，你将右下角的那个DIV放在另一个DIV里面，参考代码如下示：
<div id="box1">
<div id="box2">测试内容</div>
</div>
<style>
<!--
#box1{width:600px;height:600px;background:green;position:relative}
#box1 #box2{width:200px;height:200px;background:red;position:absolute;right:0;bottom:0}
-->
</style>
父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；本回答被网友采纳
<div id="box1">
<div id="box2">测试内容</div>
</div>
<style>
<!--
#box1{width:600px;height:600px;background:green;position:relative}
#box1 #box2{width:200px;height:200px;background:red;position:absolute;right:0;bottom:0}
-->
</style>
父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；本回答被网友采纳
第2个回答 2018-07-29
可以借助CSS定位来实现，将右下角的那个DIV放在另一个DIV里面，参考代码如下示：
<div id="box1">
<div id="box2">测试内容</div>
</div>
<style>
<!--
#box1{width:600px;height:600px;background:green;position:relative}
#box1 #box2{width:200px;height:200px;background:red;position:absolute;right:0;bottom:0}
-->
</style>
父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；本回答被网友采纳
<div id="box1">
<div id="box2">测试内容</div>
</div>
<style>
<!--
#box1{width:600px;height:600px;background:green;position:relative}
#box1 #box2{width:200px;height:200px;background:red;position:absolute;right:0;bottom:0}
-->
</style>
父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；本回答被网友采纳
第3个回答 2016-11-12
可以设置div的margin属性值，也就是外边距的取值。
也可以通过定位来设置
也可以通过定位来设置
第4个回答 2016-11-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
width:500px;
height:500px;
border:1px solid #000;
}
.div{
margin-left: 501px;
}
</style>
<body>
<div></div>
<div class="div"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
width:500px;
height:500px;
border:1px solid #000;
}
.div{
margin-left: 501px;
}
</style>
<body>
<div></div>
<div class="div"></div>
</body>
</html>
相似回答
