Html 如何使绝对定位的元素具有响应性？

我正在尝试使用Bootstrap元素创建一个交互式标记云。结果还可以，但是我已经使用绝对定位从周围

div

的顶部和左侧定位了不同的标签。它粘贴在下面，但是因为它是相当多的代码，所以我也使用了代码（注意：该代码片段旨在以整个桌面屏幕宽度查看）

然而，因为我使用了绝对定位，我失去了引导列提供的响应能力。相反，会发生多个单词标记断开成多行，标记最终相互重叠，以及其他不必要的行为

我也想使标签云响应良好，但我不太确定如何做到这一点。似乎要对媒体查询执行此操作，我需要非常频繁地对宽度进行采样。另一个想法是使用JQuery根据窗口宽度调整位置（可能还有字体大小），但这也不能解决问题

我的最终目标是在屏幕大小改变时保持内部div（即标签）的相对位置不变。在某些情况下，列可以堆叠，但在列堆叠之前，我希望能够保持相同的标记布局，即使这意味着减少标记之间的空白空间，甚至减少标记的字体大小。在这两种情况下，我都希望使更改与屏幕大小的更改成比例

那么，我如何使这个标签云响应屏幕大小的变化，同时保持内部div“标签”的布局呢

.tmp{
背景色：#000；
高度：600px；
}
塔格洛德先生{
字体：“Arial粗体”；
字体大小：粗体；
高度：600px；
背景色：#202020；
位置：相对位置；
文本对齐：居中；
最小宽度：700px；
}
.tagcloud分区{
位置：绝对位置；
}
塔加先生{
文字装饰：无；
颜色：继承；
}
.a:悬停{
文字装饰：下划线；
}
.tagcloud.l1{
字号：80px；
光标：指针；
}
.tagcloud.l2{
字体大小：68px；
光标：指针；
}
.tagcloud.l3{
字体大小：56px；
光标：指针；
}
.tagcloud.l4{
字体大小：44px；
光标：指针；
}
.tagcloud.l5{
字号：38px；
光标：指针；
}
#项目1{
颜色：#c9d35f；
顶部：10px；
左：150px；
}
#项目2{
颜色：#09c9b9；
顶部：210px；
左：440px；
}
#项目3{
颜色：#ba612e；
顶部：410像素；
左：310px；
}
#项目4{
颜色：#4b7711；
顶部：275px；
左：130像素；
}
#项目5{
颜色：#1bb1fc；
顶部：130像素；
左：560px；
}

第一项
另一项
项目3
项目4
项目5

使用响应式嵌入

允许浏览器根据其包含块的宽度确定视频或幻灯片尺寸，方法是创建一个在任何设备上都能正确缩放的内在比率

规则直接应用于

，

和要素；可以选择使用显式子体 类。如果要匹配的样式，请嵌入响应项 其他属性

专业提示！您不需要在s中包含frameborder=“0”，因为我们会为您覆盖它

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div>
 <!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

有关更多详细信息，请参阅：

---

您可以使用CSS3中的vw单位来设置字体大小属性。这将导致标记根据浏览器的宽度进行缩放：

标签的位置也应使用%（如果它们在容器中）或vh和vw单位设置（如果标签云填满整个窗口）。在您的情况下，这很可能意味着对顶部和左侧CSS属性使用百分比单位

执行所有这些操作将意味着文本大小和位置都将相对于浏览器视口

然而，它只会给你带来快乐。如果需要支持较旧的浏览器，可以使用

可选：

您还可以通过使用来检查视口单元支持，将CSS与回退功能结合起来，然后您可以对较新的浏览器使用CSS，对较旧的浏览器使用vUnit

可以使用以下方法防止多字链接断开到新行：

.tagcloud a { white-space: nowrap; }

---

一旦列折叠（例如，在移动宽度），您可能希望垂直堆叠标记，以便字体不会变得太小。如果是这种情况，您可以使用媒体查询从div元素中删除绝对位置，如果您愿意，还可以更改字体大小。

仅说明您希望它具有“响应性”是不够的。您需要描述对于不同大小和形状的视口，您期望标记云的行为方式，特别是，您期望重叠标记的解析方式。我不认为这个问题是基于观点的，但它确实不够清晰，而且就目前而言，它太宽泛了。@Alohci:谢谢你的提示。我已经更新了OP，以明确我想要达到的效果。这个问题不是关于嵌入式视频或幻灯片，也没有使用列出的任何标签。

.tagcloud a { white-space: nowrap; }