急急急，动态设置div高度和位置的问题
0
悬赏园豆：80
[已解决问题]
解决于 2020-06-29 10:35
有两个div1，div2，div2位于div1的下方，div1的高度是随着里面文字内容的多少可变的，现在问题是有没有什么好的方法，
可以让div2与高度可变的div1保持一个相对的距离，就是不管div1的高度怎么变，div2始终保持在div1下方一段距离，
我目前想到了用js，但是报错了
下面是代码
<script type="text/javascript">
var div1 = document.getElementById("ArticleContent");
var div2 = document.getElementById("RemarkBox");
div2.style.top = div1.offsetHeight;
</script>
最佳答案
0
你的结构定了？拿出来看看你的结构，以及你想要的效果。
收获园豆：40
<div class="blogcontent">
<div style="position:relative">
<div id="ArticleContent" class="articlecontent" runat="server"></div>
</div>
</div>
<div class="remark">
<div id="RemarkBox" class="remarkbox" runat="server">
<div>发表评论</div>
</div>
</div>
就是这么个结构，里面ArticleContent是从数据库读出来的html文本，高度随机的，想让文章下面跟一个评论的div，
@十多个陈信宏: 你这个结构，是想评论跟上边有个距离？那给class='remark'的div一个margin不能解决？
@顾晓北: 设置了margin，位置还是固定不变的
@十多个陈信宏: 拿出你现在这几个class的css看看。。。
@顾晓北:
.articlecontent
{
position:absolute;
top:10px;
border:40px solid white;
border-bottom:20px;
width:820px;
background-color:white;
}
.remark
{
margin-top:300px;
}
@十多个陈信宏: 你的articlecontent为啥要position:absolute;？还有，没见过把border设置成40这么宽的。。。
@顾晓北: 。。。这个问题，border是为了排版效果。。。
我去看看改成relative会怎么样。。。。
@顾晓北: 改成relative之后问题好像神奇的结局了。。。gg，多谢
@十多个陈信宏: 你这是缺乏基础，去了解一下盒子模型，还有，如果你了解了display: flex以后你应该用的地方会更多。。。
@顾晓北: 是这么回事，我一开始设置的是relative，从数据库读出来的文本排版有点问题，后来改成absolute之后排版就正常了，是这么回事。。。
@十多个陈信宏: 不用纠结那么多了，解决问题就好
@顾晓北:
display:flex;
flex-direction:column;
用了这个之后排版问题也解决了，神奇！！！，多谢多谢
@十多个陈信宏: flex布局可以参考一下这个文章，应该对你很有帮助
其他回答(3)
0
div的display默认就是block，单独占一行。2既然在1下方，那么相对于1来说就是第二行了，设置一下margin-top不久可以了吗？
收获园豆：5
0
我的想法是：div1 div2 都被同一个div【简称div0】包围着。div0设置统一宽度，以确保div1 div2左右两边对齐...然后div2设置样式 margin-top ：div2 与 div1下边距的距离。
收获园豆：5
0
“就是不管div1的高度怎么变，div2始终保持在div1下方一段距离”是什么意思，保持div1和div2的距离不变？这不是浏览器默认的行为吗？设一个margin就行了呀，可能是我理解错了你的意思
收获园豆：30
div1是从数据库读出来的html文本，高度跟随文本，
想让div1下面跟一个div2，不知道怎么确定位置
@十多个陈信宏: div是块级元素，并排两个div，默认就是后面的在前面的下一行啊，除非你改了布局方式，比如特意改成了绝对布局或流动布局
@会长: div1设置了position：relative 是不是应该设为流动布局，
我突然想到一个方法，把这两个放到table好像是不是可以。。。
@十多个陈信宏: 为什么搞的这么复杂呀，用默认的布局模式不可以吗？
@十多个陈信宏:
<html>
<head>
<style type="text/css">
#article{
background: forestgreen;
}
#commit{
background: rebeccapurple;
margin-top: 10px;
}
</style>
</head>
<body>
<div id='article'>遥记当时看《The Reasoned Schemer》
（一本讲逻辑式编程语言的小人书），被最后两页的解释器实现惊艳到了。
看似如此复杂的计算逻辑，其实现竟然这么简洁。不过碍于当时水平有限，
也就囫囵吞枣般看了过去。后来有一天，不知何故脑子灵光一闪，
把图遍历和流计算模式联系在一起，瞬间明白了《The Reasoned Schemer》中的做法。
动手写了写代码，果然如此，短短两百来行代码，就完成了解释器的实现，才发现原来如此简单。
很多时候，并非问题本身有多难，只是没有想到正确的方法</div>
<div id='commit'>如果没看错，应该有另一个更加通用的名字“函数式编程”，C#已经有相关的类库用了，似乎叫LanguageExt</div>
</body>
</html>
这样就可以了呀
@会长: 真的不可以啊，大佬，把他们两个放在一个div里的话，如果不设置任何位置，两个div就重叠在一起，并不会顺序排列
@十多个陈信宏: 我怀疑你在逗我，你发一个尽量简短的Demo上了看看啊
@会长: 多谢多谢，已经解决了，学艺不精，麻烦了(T＿T)
