布局divs使用包装或仅使用CSS并排

Question

我正在开发一个控件,旨在显示日历网格上的活动块.它是一个简单的JavaScript/CSS,依赖于jQuery进行DOM操作等.这是一张图片:

有A和B带,每个带包含几个活动块([1,2],[3,4]).活动可以重叠或相继跟随.我的目标是相应地放置活动块:如果活动重叠如[1,2],我希望它们像图中那样包裹并且彼此叠加; 如果它们像[3,4]那样顺序,我希望它们并排,不像图中所示.

另外,我希望乐队的(A,B)高度自动调整.因此,具有重叠活动块的带将具有带有连续块的带的高度的两倍.

在这一点上,我可以得到一个或另一个.

如果活动块具有display: block;,则无论它们是否实际重叠,活动都会换行(3,4).乐队的高度确实相应调整.

如果活动块有display: inline-block;,活动共享相同的高度,因此一个被另一个隐藏(1,2).乐队的高度保持一个活动块.

一切都是div,这是相关的HTML/CSS:

<div class="band">
  <div class="activity-block" style="left: 331.429px; width: 11.4286px;"></div>
  <div class="activity-block" style="left: 160px; width: 297.143px;"></div>
</div>
<div class="band">
  <div class="activity-block" style="left: 205.714px; width: 22.8571px;"></div>
  <div class="activity-block" style="left: 365.714px; width: 3417.14px;"></div>
</div>
<div class="band"></div>

乐队(A,B):

.band {
  min-height: 20px;
}

活动块(1,2,3,4):

.activity-block {
  background-color: #66C6C2;
  border-radius: 3px;
  display: block;
  height: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  position: relative;
}

left以及width从JavaScript设置活动块.

我想只使用两个CSS类,一个用于乐队,一个用于活动块.我意识到可以使用JavaScript实现目标,但我想知道这是否只能通过CSS实现.

Answer 1

正如评论用户所建议的，仅在 CSS 中无法做到这一点。CSS 的工作方式我们称之为“行”。您想要实现的是根据某些条件将内容放置在一或两行中，这是 CSS 无法处理的。您只能指定内容在其自己的行中的行为方式。最接近的方法是将元素定义为内联块，在不重叠时使用适当的左填充，在重叠时将其阻塞，但如果不使用 JavaScript 来处理逻辑，则无法做到这一点。