Html 定位div不'；Don’我没有按计划行事_Html_Css

Html 定位div不'；Don’我没有按计划行事

html css

Html 定位div不'；Don’我没有按计划行事,html,css,Html,Css,另一个div中的div不会向右移动，而是停留在左侧。下面的代码是一些看起来像聊天盒的东西绿色背景的第一个div左边的位置是0px，它可以工作，但是第二个div右边的位置是0px，它仍然粘在左边。请帮我解决这个问题。它困扰了我2天，没有正确的解决方案 <html> <head> </head> <body> <div style="width:100% height:100%; position: relative; top:0px

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


一,
二,

位置：相对

表示div的位置是“相对于自身”。所以

right:0px

的意思是“将div 0px移到正常位置的右侧”。。。不在容器的右边缘

您可以在容器上使用

position:relative

，并将

position:absolute

应用于子容器，但是分配

top

值会很麻烦

另一种方法是向包装器添加

display:flex

。然后您可以使用

marginleft:auto

将div推到右侧

.wrapper{
背景：浅灰色；
显示器：flex；
弯曲方向：立柱；
}
div>div{
宽度：200px；
高度：100px；
边缘底部：10px；
}
.左{
背景：绿色；
}
.对{
背景：红色；
左边距：自动；
}


一,
二,

.parent{
宽度：100%；
位置：相对位置；
明确：两者皆有；
}
.传入{
浮动：左；
最大宽度：80%；
背景色：#ccc；
填充：4px；
溢出：自动；
}
.答复{
浮动：对；
最大宽度：80%；
背景色：粉蓝色；
填充：4px；
}


最多占80%的传入聊天
屏幕宽度
回答，这也是一样的，但是在屏幕的右侧

使用带有

顶部

、

左侧

、

底部

和

右侧

属性的

相对

元素是无用的。您必须将其更改为

绝对值


一,
二,
使用浮动：右而不是右侧：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>


一,
二,
你想得到什么结果？而且你在宽度：100%
之后漏掉了一个分号，我基本上把div改成了位置：绝对的
，而不是相对的
。我认为这不是最好的答案，如果我再做一次绿色或蓝色背景的div，它会与前面的div重叠我的解释不完整，很抱歉，我试图创建一个聊天框，其中receive message为green div，send message为blue div，因此div的数量将通过ajaxjquery增加