如果当前元素更改大小，如何在 float:left 元素之间固定间隙以停止下一个元素移动位置？

debugcn 发表于 Dev

用户9446405

这是日历的布局。在此日历中，用户可以通过选择月份愿望来选择月份，月份悬停在更改大小以向用户提供反馈。悬停的月份会将接下来的月份推向右侧，这是因为元素的大小发生了变化并将所有内容向前移动了一点。

我尝试通过给月份标签指定特定大小来解决这个问题，问题是像六月这样的月份会比二月份有更大的空间差距，因为字母较少。

我怎样才能解决这个问题，让每个月的所有差距都保持不变，而不改变下一个元素的位置？

谢谢

#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>

米海T

您可以“复制”您的链接并显示具有绝对位置的复制内容，因此它不会左右推动其余项目。

这可以通过多种方式完成。我将展示如何pseudo-elements在 CSS 中做到这一点。

首先，您需要为title每个link（在您的情况下为 div）分配一个与显示的文本相同的属性。例如对于带有januaryadd 的divtittle="January"等等。

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

然后在悬停时，将元素的可见性更改为隐藏，将之前的元素更改为可见。将您想要的所有样式（字体大小、字体粗细等）添加到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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。