根据另一个div的高度计算div的位置

时间：2017-01-10 14:13:21

标签： html css css-position

我有两个div框。

CSS： 

.heros {

    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: red;
    border-style: solid;
}
#h1 {left: 32.9%; top: 10%;}

#h2 {left: 32.9%; top: 13%;}

HTML：

<div class="heros" id="h1"> </div>
<div class="heros" id="h2"> </div>

全屏，#h1将完美地保留在#h2之上。但是如果我改变显示比例，它们将开始重叠或展开。

我希望他们停止这样做。我的想法是：

伪代码：

#h1 {left:32,9%; top: 10%;}
#h2 {left:32,9%; top: calc (10% + height of h1);}

这样的事情可能吗？也许通过使用Javascript？

编辑：

我成功地尝试了@Alvaro和@zgood的解决方案。当我想扩展它并将其实现到我的项目时，我意识到使用getElementByClass()函数

会更好

编辑2：

更正了一些错别字。

编辑3：我现在有了代码。唯一的问题是，它仅在我调整浏览器窗口大小后才有效。

CSS：

<style>
* {
    background-color: #151515;
}


.h {
    align-self: center;
    width: 96%;
    height 100%;
    border-style: solid;
    border-width: 0px;
    border-color: 817B6F;

}


.heroes1 {
    display: flex;
    justify-content: center;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.heroes2 {
    display: flex;
    justify-content: center;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}


#h1 {left: 21.5%;  border-top-left-radius: 5px;}
#h2 {left: 32.9%;}
#h3 {left: 44.3%;}
#h4 {left: 55.7%;}    
#h5 {left: 67.1%; border-top-right-radius: 5px;}
#h6 {left: 21.5%; border-bottom-left-radius: 5px;}
#h7 {left: 32.9%;}
#h8 {left: 44.3%;}
#h9 {left: 55.7%;}    
#h10{left: 67.1%; border-bottom-right-radius: 5px;}





</style>

HTML：

<div class="heroes1" id="h1">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h2">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h3">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h4">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h5">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h6">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h7">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h8">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h9">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h10">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

JS：

<script>
    var heroes1 = document.getElementsByClassName('heroes1'),
    heroes2 = document.getElementsByClassName('heroes2'),
    onResize = function() {
        for (var i = 0; i < heroes1.length; i++) {
            heroes2[i].style.top = (heroes1[i].offsetHeight + heroes1[i].getBoundingClientRect().top)
        }
    }, 
    init = (function() {
    onResize();
    window.addEventListener("resize", onResize, false);
    })();

</script>

3 个答案:

答案 0 :(得分：1)

仅使用JavaScript：

var $h1 = document.getElementById('h1'),
  $h2 = document.getElementById('h2');

$h2.style.top = ($h1.offsetHeight + $h1.getBoundingClientRect().top) + 'px';
.heros {
  background-color: #817B6F;
  position: absolute;
  width: 10%;
  top: 10%;
  height: auto;
  padding: 0.7%;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}
#h1 {
  left: 32.9%;
  top: 10%;
}
#h2 {
  left: 32.9%;
}
<div class="heros" id="h1"></div>
<div class="heros" id="h2"></div>

如果使用jQuery是一个选项：

$(function() {

  var $h1 = $('#h1'),
    $h2 = $('#h2');

  $h2.css('top', ($h1.outerHeight() + $h1.offset().top));

});
.heros {
  background-color: #817B6F;
  position: absolute;
  width: 10%;
  top: 10%;
  height: auto;
  padding: 0.7%;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}
#h1 {
  left: 32.9%;
  top: 10%;
}
#h2 {
  left: 32.9%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="heros" id="h1"></div>
<div class="heros" id="h2"></div>

如果JavaScript不是一个选项，我会建议使用容器。您可以将此容器置于绝对位置，并使用您分配给.heros的某些属性。然后定位.heros亲戚。

.heros {
  background-color: #817B6F;
  position: relative;
  top: 10%;
  height: auto;
  padding: 14%;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}
#container {
  position: absolute;
  left: 32.9%;
  top: 10%;
  width: 10%;
}
<div id="container">
  <div class="heros" id="h1"></div>
  <div class="heros" id="h2"></div>
</div>

附注：您的background-color中存在拼写错误，应为#817B6F

答案 1 :(得分：1)

使用flex 

.wrapper {
  display: flex;
  flex-direction: column;
  width: 10%;
  position: absolute;
  left: 32.9%;
  top: 10%;
}
.heros {
  background-color: #817B6F;
  min-height: 1em;
  margin-bottom: .2em;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}
<div class="wrapper">
  <div class="heros" id="h1">
    <p>
      bla
    </p>
  </div>
  <div class="heros" id="h2"></div>
</div>

答案 2 :(得分：0)

您的代码存在一些问题：

  • name=W arrior应为name="Warrior"
  • 获取.getElementByClass应为.getElementsByClassName。在返回数组时，for循环是将代码应用于数组中每个元素的最简单方法。

//Select .heroes and .heroes2 and give them a class
var heroes1 = document.getElementsByClassName('heroes')
var heroes2 = document.getElementsByClassName('heroes2')

//Make a function that is called when onResize is called
var onResize = function() {
  
    //Make variable i; Continue loop as long as i is less 
    //than the number of .hero elements there are; After one 
    //occurance of loop, plus 1 to i.
    for (var i = 0; i < heroes1.length; i++) {
      heroes2[i].style.top = (heroes1[i].offsetHeight + heroes1[i].getBoundingClientRect().top)

      //This sets the height of the "i" of heroes2 to the height + border + padding of the "i" heroes1 AND the how far .hero1 is from the top of the window.
      
      // E.g if i = 0 and the first heroes1 element had:
      //   a height of 10px
      //   a padding of 0
      //   a border or 1px 
      //   and 25px from the top of the window
      // Then the first heroes2 element would receive this
      // CSS style {  top: 37px  } (10px + 1px[top border] 
      // + 1px[bottom border] + 25px)
    }
  }

// I'm updating the code below because I do it a different 
//way

  window.onresize = onResize() //This runs when the window is resized
  onResize(); //This runs when the code gets called
.h {
  align-self: center;
  width: 96%;
  height 100%;
  border-style: solid;
  border-width: 0px;
  border-color: 817B6F;
}
.heroes {
  display: flex;
  justify-content: center;
  background-color: 817B6F;
  position: absolute;
  width: 10%;
  top: 10%;
  height: auto;
  padding: 0.7%;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}
.heroes2 {
  display: flex;
  justify-content: center;
  background-color: 817B6F;
  position: absolute;
  width: 10%;
  height: auto;
  padding: 0.7%;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}
#h1 {
  left: 21.5%;
  border-top-left-radius: 5px;
}
#h2 {
  left: 32.9%;
}
#h3 {
  left: 44.3%;
}
#h4 {
  left: 55.7%;
}
#h5 {
  left: 67.1%;
  border-top-right-radius: 5px;
}
#h6 {
  left: 21.5%;
  border-bottom-left-radius: 5px;
}
#h7 {
  left: 32.9%;
}
#h8 {
  left: 44.3%;
}
#h9 {
  left: 55.7%;
}
#h10 {
  left: 67.1%;
  border-bottom-right-radius: 5px;
}
<div class="heroes" id="h1">

  <img class="h" name="Warrior" src="https://placehold.it/256/" <div class="heroes" id="h2">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes" id="h3">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes" id="h4">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes" id="h5">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes2" id="h6">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes2" id="h7">

  <img class="heroes2" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes2" id="h8">

  <img class="heroes2" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes2" id="h9">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />
</div>

<div class="heroes2" id="h10">

  <img class="h" name="Warrior" src="https://placehold.it/256/" />

相关问题
最新问题