gpt4 book ai didi

html - 定位的 div 未按预期运行

转载 作者:太空宇宙 更新时间:2023-11-04 07:34:21 25 4
gpt4 key购买 nike

另一个 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 值将是麻烦。

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>

关于html - 定位的 div 未按预期运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49091431/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com