时间戳

首页 > 解决方案 > 在兄弟 div 的子元素中定位 div

html - 在兄弟 div 的子元素中定位 div

问题描述

我有一个由库插入的 div。基本上这个 div 包含 2 个高度未知的子 div，可以根据 API 响应和浏览器窗口宽度而改变。

我想在和my-div之间显示我的 div ( )top-barbottom-bar

<div class="my-div">
  My content with known height 
</div>

<div class="library-output">
  <div class="top-bar">Some content goes here with unknown height</div>
  <div class="bottom-bar">Another content goes here with unknown height</div>
</div>

我不能修改库，也不能用 js 修改它的输出（基本上库是一个从 3rd 方网站下载的反应应用程序）。所有 div 的类名都是预先知道的。

有没有办法用 CSS 实现这一点？我正在考虑将 margin-bottom 应用于top-bar这样会有足够的空间，但我正在努力定位my-div,

标签： htmlcss

解决方案

通常，使用 Javascript 在另一个元素之后插入一个元素，您可以使用此模式 someElement.parentNode.insertBefore(newElement, someElement.nextSibling);

其中 newElement 是要插入的元素， someElement 是要插入的元素。

所以在你的情况下，它看起来像：

const myDiv = document. getElementsByClassName( 'my-div' ); const topDiv = document. getElementsByClassName( 'top-bar' ); topDiv.parentNode.insertBefore( myDiv, topDiv.nextSibling );

推荐阅读