如何使绝对定位的元素响应？

Question

我正在尝试使用Bootstrap元素创建交互式标记云。它出来没关系，但我已经使用周围div的顶部和左侧的绝对定位来定位不同的标签。它粘贴在下面，但由于它是相当多的代码，我也用代码制作了this fiddle（注意：该片段旨在以完整的桌面屏幕宽度查看）。

但是，因为我使用了绝对定位，所以我失去了Bootstrap列提供的响应能力。相反的是，多字标签分为多行，标签最终相互重叠，以及其他不需要的行为。

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

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

那么，如何在保持内部div“标签”布局的同时，使这个标签云响应屏幕尺寸变化？

.tmp{
	background-color: #000;
	height: 600px;
}

.tagcloud{
	font: "Arial Bold";
	font-weight: bolder;
	height: 600px;
	background-color: #202020;
	position: relative;
	text-align: center;
	min-width: 700px;
}

.tagcloud div{
	position: absolute;
}

.tagcloud a{
	text-decoration: none;
	color: inherit;
}

.tagcloud a:hover{
	text-decoration: underline;
}

.tagcloud .l1{
	font-size: 80px;
	cursor: pointer;
}

.tagcloud .l2{
	font-size: 68px;
	cursor: pointer;
}

.tagcloud .l3{
	font-size: 56px;
	cursor: pointer;
}

.tagcloud .l4{
	font-size: 44px;
	cursor: pointer;
}

.tagcloud .l5{
	font-size: 38px;
	cursor: pointer;
}


#item1{
	color: #c9d35f;
	top: 10px;
	left: 150px;
}

#item2{
	color: #09c9b9;
	top: 210px;
	left: 440px;
}
#item3{
	color: #ba612e;
	top: 410px;
	left: 310px;
}
#item4{
	color: #4b7711;
	top: 275px;
	left: 130px;
}
#item5{
	color: #1bb1fc;
	top: 130px;
	left: 560px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 tmp"></div>
    <div class="col-sm-6 col-centered tagcloud">
      <div class="l1" id="item1">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          First Item</a>
      </div>
      <div class="l2" id="item2">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Another Item
        </a>
      </div>
      <div class="l3" id="item3">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item3
        </a>
      </div>
      <div class="l4" id="item4">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item4
        </a>
      </div>
      <div class="l5" id="item5">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item5
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

另一答案