如果当前元素更改大小，如何在浮动之间有固定的间隙:如果当前元素更改大小，左侧元素将停止下一个元素移动位置？

Question

这是日历的布局。在这个日历中，用户可以通过选择月份愿望来选择月份，月份悬停在更改大小上，以向用户提供反馈。徘徊的月份将下一个月推到右边，这是因为元素的大小发生了变化，并将一切向前移动了一点。

我试着解决这个问题，给月份贴上一个特定的尺寸，问题是6月这样的月份的间距会比二月大得多，因为字母较少。

如何在不改变下一个元素的位置的情况下，解决这个问题，使每个月之前的所有空白保持不变？

谢谢

​

#coil_calendar_container {
  position: absolute;
  display: flex;
  border-radius: 8px;
  margin: 8vh auto 0 auto;
  width: 80%;
  height: 850px;
  left: 0;
  right: 0;
  background-image: linear-gradient(grey, black);
  color: orange;
  font-size: 20px;
  text-align: center;
  z-index: 2;
  font-family: "Times New Roman";
}

#coil_calendar_container p {
  padding: 0;
  margin: 0;
  color: #dddddd;
  font-size: 40px;
}

.top_display_layout {
  position: absolute;
  top: 0;
  height: 150px;
  width: 100%;
  border-bottom: 2px solid black;
}

.top_display_layout .coil_month_selection {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 30px;
  width: auto;
  font-size: 30px;
  display: flex;
}

.coil_label_month {
  position: relative;
  float: left;
  max-width: 120px;
  padding: 0 20px 0 20px;
  cursor: pointer;
  font-size: 25px;
}

.coil_label_month:hover {
  font-weight: bolder !important;
  font-size: 28px !important;
}

<div id="coil_calendar_container">
  <div class="top_display_layout">
    <p>09<br>Monday</p>
    <div class="coil_month_selection">
      <div class="coil_label_month" id="Jan-coil" onclick="month_select(1);">January</div>
      <div class="coil_label_month" id="Feb-coil" onclick="month_select(2);">February</div>
      <div class="coil_label_month" id="Mar-coil" onclick="month_select(3);">March</div>
      <div class="coil_label_month" id="Apr-coil" onclick="month_select(4);">April</div>
      <div class="coil_label_month" id="May-coil" onclick="month_select(5);">May</div>
      <div class="coil_label_month" id="June-coil" onclick="month_select(6);">June</div>
      <div class="coil_label_month" id="July-coil" onclick="month_select(7);">July</div>
      <div class="coil_label_month" id="Aug-coil" onclick="month_select(8);">August</div>
      <div class="coil_label_month" id="Sep-coil" onclick="month_select(9);">September</div>
      <div class="coil_label_month" id="Oct-coil" onclick="month_select(10);">October</div>
      <div class="coil_label_month" id="Nov-coil" onclick="month_select(11);">November</div>
      <div class="coil_label_month" id="Dec-coil" onclick="month_select(12);">December</div>
    </div>
  </div>
</div>

​

Answer 1

您可以“复制”您的链接，并显示复制的内容，这将有一个绝对的位置，所以它不会推动其余的项目左和右。

这可以通过多种方式实现。我将演示如何在CSS中使用pseudo-elements进行操作。

First您需要为每个link (在您的示例中是div )分配一个与显示的文本相同的title属性。例如对于div和january，添加tittle="January"等等。

然后，使用content属性获取元素标题并将其添加到:before伪元素中。这之前有位置绝对和可见性隐藏。

然后，在悬停时，将元素的可见性更改为隐藏，将前面的元素更改为visibile。添加您想要的所有样式(字体大小、字体重量等)到before伪元素。

我使用visibility是因为当它隐藏元素时，该元素仍然占据空间，可以通过悬停、单击、焦点等事件“触摸”。

提示：如果您有很多链接(Div)，您可以使用javascript/jquery自动添加标题(将文本作为$(link).attr(" title "，text )添加)

请看下面的片段，让我知道这是否适合你。我在前7项中增加了标题

​

#coil_calendar_container {
  position: absolute;
  display: flex;
  border-radius: 8px;
  margin: 8vh auto 0 auto;
  width: 80%;
  height: 850px;
  left: 0;
  right: 0;
  background-image: linear-gradient(grey, black);
  color: orange;
  font-size: 20px;
  text-align: center;
  z-index: 2;
  font-family: "Times New Roman";
}

#coil_calendar_container p {
  padding: 0;
  margin: 0;
  color: #dddddd;
  font-size: 40px;
}

.top_display_layout {
  position: absolute;
  top: 0;
  height: 150px;
  width: 100%;
  border-bottom: 2px solid black;
}

.top_display_layout .coil_month_selection {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 30px;
  width: auto;
  font-size: 30px;
  display: flex;
}

.coil_label_month {
  position: relative;
  float: left;
  max-width: 120px;
  padding: 0 20px 0 20px;
  cursor: pointer;
  font-size: 25px;
}

.coil_label_month:before {
  content: " " attr(title) "";
  width: 100%;
  left: 0;
  right: 0;
  font-weight: bolder !important;
  font-size: 28px !important;
  position: absolute;
  margin: 0 auto;
  visibility: hidden
}

.coil_label_month:hover:before {
  visibility: visible;
}

.coil_label_month:hover {
  visibility: hidden
}

<div id="coil_calendar_container">
  <div class="top_display_layout">
    <p>09<br>Monday</p>
    <div class="coil_month_selection">
      <div class="coil_label_month" title="January" id="Jan-coil" onclick="month_select(1);">January</div>
      <div class="coil_label_month" id="Feb-coil" onclick="month_select(2);" title="February">February</div>
      <div class="coil_label_month" id="Mar-coil" onclick="month_select(3);" title="March">March</div>
      <div class="coil_label_month" id="Apr-coil" onclick="month_select(4);" title="April">April</div>
      <div class="coil_label_month" id="May-coil" onclick="month_select(5);" title="May">May</div>
      <div class="coil_label_month" id="June-coil" onclick="month_select(6);" title="June">June</div>
      <div class="coil_label_month" id="July-coil" onclick="month_select(7);" title="July">July</div>
      <div class="coil_label_month" id="Aug-coil" onclick="month_select(8);">August</div>
      <div class="coil_label_month" id="Sep-coil" onclick="month_select(9);">September</div>
      <div class="coil_label_month" id="Oct-coil" onclick="month_select(10);">October</div>
      <div class="coil_label_month" id="Nov-coil" onclick="month_select(11);">November</div>
      <div class="coil_label_month" id="Dec-coil" onclick="month_select(12);">December</div>
    </div>
  </div>
</div>

​