时间戳

首页 > 解决方案 > 如何根据最高跨度调整相邻跨度的跨度高度

javascript - 如何根据最高跨度调整相邻跨度的跨度高度

问题描述

我如何将每个紫色的跨度调整为同一行的跨度，以便每当一个包含更多内容时<span>，同一行上的那些也垂直拉伸。

height = auto 确实有效，但它不能解决同一行中跨度的问题。

我去了<span>，也许我应该用<td>and来建造它<tr>

这是带有 HTML CSS 和 JS 的代码片段

const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

let planningsection = document.createElement("div");
planningsection.className = "planning";

let days = document.createElement("div");
days.className = "jours";

planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);

weekdays.map(e => {
  // Création d'un span
  let day = document.createElement("span");
  day.className = "jour_one";
  let dayText = document.createTextNode(e);

  // On insere dans chaque span un jour et le span dans la div jours
  day.appendChild(dayText);
  days.appendChild(day);
})

let section = document.createElement("section");
section.className = "callender_one";

planningsection.appendChild(section);

for (planning = 0; planning < 7; planning++) {

  let colonne = document.createElement("div");
  colonne.className = "horaire_one";
  colonne.id = ("col" + planning);

  for (i = 0; i < 26; i++) {
    let span = document.createElement("span");
    span.className = "dispo_one_rpv";
    // On rajoute un identifiant à la case en fonction de la colonne
    span.id = (colonne.id + i);
    // let plageText = document.createTextNode("Dispo / id: " + span.id);
    let plageText = document.createTextNode("");
    span.appendChild(plageText);
    colonne.appendChild(span);

    section.appendChild(colonne);
  }
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);
#main-section {
  display: flex;
  flex-direction: row;
}

.plage_rpv {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 50px;
  font-size: medium;
  text-align: center;
}

.horaire {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 44px;
  text-align: center;
}

#plannings_one {
  width: 100%;
  /* overflow-x: scroll; */
}

.dispo_one_rpv {
  /* line-height: 2.9; */
  height: 50px;
  font-size: 10px;
  border: solid 1px #bb12e8;
  text-align: center;
}

.callender_one {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.horaire_one {
  display: flex;
  flex-direction: column;
  width: 14.32%;
}

.jours {
  display: flex;
}

.jour_one {
  width: 14.32%;
  line-height: 2.5;
  text-align: center;
  border: solid 1px grey;
  height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <main class="planning-main_rpv">
    <section id="main-section">
      <div id="horaire">
        <div class="horaire">Horaires</div>
        <div class="plage_rpv">08:00 - 08:30</div>
        <div class="plage_rpv">08:30 - 09:00</div>
        <div class="plage_rpv">09:00 - 09:30</div>
        <div class="plage_rpv">09:30 - 10:00</div>
        <div class="plage_rpv">10:00 - 10:30</div>
        <div class="plage_rpv">10:30 - 11:00</div>
        <div class="plage_rpv">11:00 - 11:30</div>
        <div class="plage_rpv">11:30 - 12:00</div>
        <div class="plage_rpv">12:00 - 12:30</div>
        <div class="plage_rpv">12:30 - 13:00</div>
        <div class="plage_rpv">13:00 - 13:30</div>
        <div class="plage_rpv">13:30 - 14:00</div>
        <div class="plage_rpv">14:00 - 14:30</div>
        <div class="plage_rpv">14:30 - 15:00</div>
        <div class="plage_rpv">15:00 - 15:30</div>
        <div class="plage_rpv">15:30 - 16:00</div>
        <div class="plage_rpv">16:00 - 16:30</div>
        <div class="plage_rpv">16:30 - 17:00</div>
        <div class="plage_rpv">17:00 - 17:30</div>
        <div class="plage_rpv">17:30 - 18:00</div>
        <div class="plage_rpv">18:00 - 18:30</div>
        <div class="plage_rpv">18:30 - 19:00</div>
        <div class="plage_rpv">19:00 - 19:30</div>
        <div class="plage_rpv">19:30 - 20:00</div>
        <div class="plage_rpv">20:00 - 20:30</div>
        <div class="plage_rpv">20:30 - 21:00</div>
      </div>
      <div id=plannings_one>

      </div>
    </section>
  </main>
</body>

</html>

标签： javascripthtmljquerycss

解决方案

解释 ：

对于CSS，只需将height属性替换min-height为.dispo_one_rpv.

对于JavaScript，请注意我添加了两个函数calc_max()和set_heights(). box每当您在元素内附加 textNode 时，请更新ind变量，例如：

ind = $(box).index() + 1;

并调用函数calc_max()。它将自动计算最大高度的元素，并将整行中所有元素的高度设置为计算值。

const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

let planningsection = document.createElement("div");
planningsection.className = "planning";

let days = document.createElement("div");
days.className = "jours";

planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);

weekdays.map(e => {
  let day = document.createElement("span");
  day.className = "jour_one";
  let dayText = document.createTextNode(e);

  day.appendChild(dayText);
  days.appendChild(day);
})

let section = document.createElement("section");
section.className = "callender_one";

planningsection.appendChild(section);

for (planning = 0; planning < 7; planning++) {

  let colonne = document.createElement("div");
  colonne.className = "horaire_one";
  colonne.id = ("col" + planning);

  for (i = 0; i < 26; i++) {
    let span = document.createElement("span");
    span.className = "dispo_one_rpv";
    span.id = (colonne.id + i);
    let plageText = document.createTextNode("");
    span.appendChild(plageText);
    colonne.appendChild(span);

    section.appendChild(colonne);
  }
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);

var ind = $(box).index() + 1;

function calc_max() {
  let max_height = $('#horaire div:eq(' + ind + ')').height();
  $('.horaire_one span:nth-child(' + ind + ')').each(function() {
    if ($(this).height() > max_height) {
      max_height = $(this).height();
    }
  });
  
  set_heights(max_height);
}

calc_max();

function set_heights(height){
  $('#horaire div:eq(' + ind + ')').height(height);
  $('.horaire_one span:nth-child(' + ind + ')').height(height);
}
#main-section {
  display: flex;
  flex-direction: row;
}

.plage_rpv {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 50px;
  font-size: medium;
  text-align: center;
}

.horaire {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 44px;
  text-align: center;
}

#plannings_one {
  width: 100%;
  /* overflow-x: scroll; */
}

.dispo_one_rpv {
  /* line-height: 2.9; */
  min-height: 50px;
  font-size: 10px;
  border: solid 1px #bb12e8;
  text-align: center;
}

.callender_one {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.horaire_one {
  display: flex;
  flex-direction: column;
  width: 14.32%;
}

.jours {
  display: flex;
}

.jour_one {
  width: 14.32%;
  line-height: 2.5;
  text-align: center;
  border: solid 1px grey;
  height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <main class="planning-main_rpv">
    <section id="main-section">
      <div id="horaire">
        <div class="horaire">Horaires</div>
        <div class="plage_rpv">08:00 - 08:30</div>
        <div class="plage_rpv">08:30 - 09:00</div>
        <div class="plage_rpv">09:00 - 09:30</div>
        <div class="plage_rpv">09:30 - 10:00</div>
        <div class="plage_rpv">10:00 - 10:30</div>
        <div class="plage_rpv">10:30 - 11:00</div>
        <div class="plage_rpv">11:00 - 11:30</div>
        <div class="plage_rpv">11:30 - 12:00</div>
        <div class="plage_rpv">12:00 - 12:30</div>
        <div class="plage_rpv">12:30 - 13:00</div>
        <div class="plage_rpv">13:00 - 13:30</div>
        <div class="plage_rpv">13:30 - 14:00</div>
        <div class="plage_rpv">14:00 - 14:30</div>
        <div class="plage_rpv">14:30 - 15:00</div>
        <div class="plage_rpv">15:00 - 15:30</div>
        <div class="plage_rpv">15:30 - 16:00</div>
        <div class="plage_rpv">16:00 - 16:30</div>
        <div class="plage_rpv">16:30 - 17:00</div>
        <div class="plage_rpv">17:00 - 17:30</div>
        <div class="plage_rpv">17:30 - 18:00</div>
        <div class="plage_rpv">18:00 - 18:30</div>
        <div class="plage_rpv">18:30 - 19:00</div>
        <div class="plage_rpv">19:00 - 19:30</div>
        <div class="plage_rpv">19:30 - 20:00</div>
        <div class="plage_rpv">20:00 - 20:30</div>
        <div class="plage_rpv">20:30 - 21:00</div>
      </div>
      <div id=plannings_one>

      </div>
    </section>
  </main>
</body>

</html>

推荐阅读