另一个div内的div不会向右移动，而只是向左移动。下面的代码是一些看起来像聊天框的第一个div与绿色背景的位置是0px左，它的工作，但第二个div有0px正确，它仍然坚持左边请帮助我这困扰我2天没有正确的解决
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
position: relative意味着div被定位为“相对于自身”。所以right: 0px只是意味着“将div 0px移动到通常所在的位置的右边”......而不是容器的右边缘。
你可以在容器上使用position: relative，然后将position: absolute应用于孩子，但是分配top值会很麻烦。
另一种方法是将display: flex添加到包装器中。然后你可以使用margin-left: auto将div推到右边。
.wrapper {
background: lightgrey;
display: flex;
flex-direction: column;
}
div > div {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
.left {
background: green;
}
.right {
background: red;
margin-left: auto;
}<div class="wrapper">
<div class="left">
<p>1</p>
</div>
<div class="right">
<p>2</p>
</div>
</div>.parent{
width:100%;
position: relative;
clear: both;
}
.incoming {
float: left;
max-width: 80%;
background-color: #ccc;
padding: 4px;
overflow: auto;
}
.reply {
float: right;
max-width: 80%;
background-color: powderblue;
padding: 4px;
}<div class="parent">
<div class="incoming"><p>Incoming chat that takes up a maximum of 80%
of screen width.</p></div>
<div class="reply"><p>Reply, that also does the same, but from the right of the screen.</p></div>
</div>编辑以反映更新的要求
使用relative元素与top，left，bottom和right属性是没用的。你必须将它改为absolute值。
<div style="width:100% height:100%; position: relative; background-color:white;">
<div style="width:200px; height:100px; position: absolute; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: absolute; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>UPDATE
这是定位元素的另一种方法
<div style="width:100%; height:100px; background-color:white;">
<div style="width:200px; height:100px; float:left; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>更新＃2
这是你聊天的标记
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat {
width: 100%;
background: lightblue;
padding: 10px;
overflow: hidden;
}
.message {
clear: both;
font-family: sans-serif;
color: white;
}
.to, .from {
width: 40%;
padding: 10px;
overflow: hidden;
}
.to {
background: pink;
float: left;
}
.from {
background: lightgreen;
float: right;
}<div class="chat">
<div class="message">
<div class="to">hi</div>
</div>
<div class="message">
<div class="to">how are u?</div>
</div>
<div class="message">
<div class="from">fine, thnks</div>
</div>
<div class="message">
<div class="to">can u help me?</div>
</div>
<div class="message">
<div class="from">sure, no problem</div>
</div>
</div>使用float: right;而不是right:0px;。
这是代码。
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>