Question

另一个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>

Answer 1

position: relative表示div位于“相对于自身”。所以right: 0px只是意味着“将div 0px移动到通常所在的位置”...而不是容器的右边缘。

您可以在容器上使用position: relative，然后将position: absolute应用于子项，但分配top值将非常麻烦。

Info about position

另一种方法是将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>

Answer 2

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

编辑以反映更新的要求

Answer 3

将relative元素与top，left，bottom和right属性一起使用是没用的。您必须将其更改为absolute值。

＆＃13;

<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>

＆＃13;

<强>更新

这是定位元素的另一种方法

＆＃13;

<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>

＆＃13;

<强>更新＃2

这是您聊天的标记

＆＃13;

* {
   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;
}

＆＃13;

<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>

＆＃13;

Answer 4

使用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>

定位的div不会按预期运行

4 个答案: