gpt4 book ai didi

css - 无法将 div 定位在其他 div 中

转载 作者:太空宇宙 更新时间:2023-11-04 04:42:30 26 4
gpt4 key购买 nike

现在我有一个 ID 为 "wrapper" 的主 div,在这个 div 中我试图制作另外两个 div,它们占据了 "wrapper 的整个宽度"。第一个 div,“sidebar”,很窄,包含一些我想显示在 “wrapper” 最右侧的信息。我拥有的第二个内部 div 将根据用户插入的数据使用 php 和 javascript 动态更新,id 称为 “maincontent”

一开始我可以很好地将它们定位在“包装器”中。当在“maincontent”div 中添加新内容时,问题就来了。添加新内容时,“侧边栏”div 将根据新添加内容的高度按比例向下移动。

所以,我的问题是:

如何让两个内部 div 保持它们在页面顶部的位置,同时仍然能够动态向下扩展而没有任何移动?

最佳答案

你需要float:left你的左边内容:

看下面的CSS:

  .wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;

}

你的 div 如下:

<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>

重要的是,你准确的将父容器的宽度划分给子容器

total width of child containers <= parent width

看,你需要了解position css样式的属性当你做 position:relative对于任何容器,css 属性如 top, left,right,bottom开始为他们工作。

关于css - 无法将 div 定位在其他 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15183461/

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