Question

请检查这个小提琴并告诉我即使第一个<div>的高度增加，我仍然可以将第二个<div>保持在同一位置。如果第一个<div>与第二个重叠，则可以。我只是不想让第二个div完全移动。

  <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
    Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
    Sub
</div>
<script>
    function expandHeight(){
        $("#main-div").animate({height:"200px"},400);
    }
    function reduceHeight(){
        $("#main-div").animate({height:"100px"},400);
    }
</script>

感谢。

Answer 1

使用CSS，您可以使用position: absolute;

<style>
    #main-div {
      position: absolute;
    }
</style>

执行此操作将允许两个div在浏览器窗口周围自由移动而不会相互影响。

Answer 2

如果您只想让第二个div保持移动，那么一些简单的CSS就可以了。只需将其添加到第二个div的样式属性：

position:absolute; top:130px;

Answer 3

尝试类似的答案：

http://fiddle.jshell.net/MvzFC/24/

CSS：

foreach (HtmlNode node in doc.DocumentNode.SelectNodes("//div[@id='top3']//li"))
{ 
    .....
    linkNode = node.SelectSingleNode("a[1]");
    var em = linkNode.SelectSingleNode("strong/em").InnerText;
    //TODO: use `em` value according to your need :
    .....
}

即使第一个div的高度增加，如何保持第二个div的位置固定

3 个答案: