上下两个绝对Divs

时间:2018-09-06 15:42:28

标签: javascript html css css-position absolute

我有两个绝对的div。我希望div1位于顶部,而div2位于其下面。.div1的大小可能会根据其中的数据而变化,并且我希望div2能够与div1一起使用相应地。

enter image description here

<div class="div1"></div>
<div class="div2"></div>

这是div1的样式:

.div1{
 list-style-type: none;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}

如何将div2放置在div1下并根据div1的大小保持在它之下?

.div2{
 width:55%;
 position:absolute;
 left:0;
}

如果需要使用javascript,请仅提供javascript。而不是jquery。

2 个答案:

答案 0 :(得分:2)

position: absolute设置为父级:

<div class='div'>
  <div class='div1'></div>
  <div class='div2'></div>
</div>

和CSS:

.div {
  width: 55%;
  position: absolute;
  left: 0;
}

div1 { ... }
div2 { ... }

答案 1 :(得分:1)

您可以像这样利用第一个div元素的Myset<Integer>

a.Union(b)
offsetHeight
const div1 = document.querySelector('.div1');
const div2 = document.querySelector('.div2');

console.log(div1.offsetHeight);

div2.style.top = div1.offsetHeight + 'px';