首页 新闻 搜索 专区 学院

急急急,动态设置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>

CSS
十多个陈信宏的主页 十多个陈信宏 | 初学一级 | 园豆:130
提问于:2020-06-29 08:11
< >
分享
最佳答案
0

你的结构定了?拿出来看看你的结构,以及你想要的效果。

收获园豆:40
顾晓北 | 专家六级 |园豆:10213 | 2020-06-29 09:33

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

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 09:50

@十多个陈信宏: 你这个结构,是想评论跟上边有个距离?那给class='remark'的div一个margin不能解决?

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 09:53

@顾晓北: 设置了margin,位置还是固定不变的

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 09:58

@十多个陈信宏: 拿出你现在这几个class的css看看。。。

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 09:59

@顾晓北:
.articlecontent
{
position:absolute;
top:10px;
border:40px solid white;
border-bottom:20px;
width:820px;
background-color:white;
}
.remark
{
margin-top:300px;
}

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:05

@十多个陈信宏: 你的articlecontent为啥要position:absolute;?还有,没见过把border设置成40这么宽的。。。

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 10:14

@顾晓北: 。。。这个问题,border是为了排版效果。。。
我去看看改成relative会怎么样。。。。

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:29

@顾晓北: 改成relative之后问题好像神奇的结局了。。。gg,多谢

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:33

@十多个陈信宏: 你这是缺乏基础,去了解一下盒子模型,还有,如果你了解了display: flex以后你应该用的地方会更多。。。

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 10:41

@顾晓北: 是这么回事,我一开始设置的是relative,从数据库读出来的文本排版有点问题,后来改成absolute之后排版就正常了,是这么回事。。。

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:47

@十多个陈信宏: 不用纠结那么多了,解决问题就好

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 10:50

@顾晓北:
display:flex;
flex-direction:column;
用了这个之后排版问题也解决了,神奇!!!,多谢多谢

十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:50

@十多个陈信宏: flex布局可以参考一下这个文章,应该对你很有帮助

flex布局

顾晓北 | 园豆:10213 (专家六级) | 2020-06-29 10:52
其他回答(3)
0

div的display默认就是block,单独占一行。2既然在1下方,那么相对于1来说就是第二行了,设置一下margin-top不久可以了吗?

收获园豆:5
blackheart | 园豆:3454 (老鸟四级) | 2020-06-29 08:29
0

我的想法是:div1 div2 都被同一个div【简称div0】包围着。div0设置统一宽度,以确保div1 div2左右两边对齐...然后div2设置样式 margin-top :div2 与 div1下边距的距离。

收获园豆:5
南小鸟 | 园豆:454 (菜鸟二级) | 2020-06-29 08:44
0

“就是不管div1的高度怎么变,div2始终保持在div1下方一段距离”是什么意思,保持div1和div2的距离不变?这不是浏览器默认的行为吗?设一个margin就行了呀,可能是我理解错了你的意思

收获园豆:30
会长 | 园豆:9120 (大侠五级) | 2020-06-29 09:17

div1是从数据库读出来的html文本,高度跟随文本,
想让div1下面跟一个div2,不知道怎么确定位置

支持(0) 反对(0) 十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 09:53

@十多个陈信宏: div是块级元素,并排两个div,默认就是后面的在前面的下一行啊,除非你改了布局方式,比如特意改成了绝对布局或流动布局

支持(0) 反对(0) 会长 | 园豆:9120 (大侠五级) | 2020-06-29 09:55

@会长: div1设置了position:relative 是不是应该设为流动布局,
我突然想到一个方法,把这两个放到table好像是不是可以。。。

支持(0) 反对(0) 十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:03

@十多个陈信宏: 为什么搞的这么复杂呀,用默认的布局模式不可以吗?

支持(0) 反对(0) 会长 | 园豆:9120 (大侠五级) | 2020-06-29 10:07

@十多个陈信宏:

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

这样就可以了呀

支持(0) 反对(0) 会长 | 园豆:9120 (大侠五级) | 2020-06-29 10:17

@会长: 真的不可以啊,大佬,把他们两个放在一个div里的话,如果不设置任何位置,两个div就重叠在一起,并不会顺序排列

支持(0) 反对(0) 十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:27

@十多个陈信宏: 我怀疑你在逗我,你发一个尽量简短的Demo上了看看啊

支持(0) 反对(0) 会长 | 园豆:9120 (大侠五级) | 2020-06-29 10:33

@会长: 多谢多谢,已经解决了,学艺不精,麻烦了(T_T)

支持(0) 反对(0) 十多个陈信宏 | 园豆:130 (初学一级) | 2020-06-29 10:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册