时间戳

首页 > 解决方案 > 如何使一个元素的子元素与另一个元素的子元素的高度相同？

jquery - 如何使一个元素的子元素与另一个元素的子元素的高度相同？

问题描述

我目前正在构建一个定价表，我想知道如何使子元素每行具有相同的高度。我正在使用页面构建器，因为网站是在 WordPress 中构建的，并且行字段位于不同的列中。所以基本上它的结构不像表格，我想让每一行的高度相同。 在此处输入图像描述

我已经尝试过这个matchHeight库，但我无法让它与每列的子元素一起工作。

这是一个笔演示

$('.col > div').matchHeight();

标签： jquerycsselementor

解决方案

为什么不将 CSS 属性min-height添加到.col > div选择器 => min-height: calc(100% / var(--col-rows));。var(--col-rows)将使用来自 DOM 通过 javascript 的 css 变量在您的 CSS 中设置。

.col {
/* target the div within the .col in your scss */
> div {
    /* the --col-rows variable will be used to calculate 
       the number of elements we have in our rows 
       so they are all take up the same amount of space */      
    min-height: calc(100% / var(--col-rows));

使用 JavaScript 设置 css 变量以获取您拥有的行数，然后将该数字放入您的:root样式中setProperty()

document.documentElement.style.setProperty(`--col-rows`, maxNum);

CSS:root元素变量：

:root {
  --col-rows: 0; /* this will be set using JS to read the 
                    amount of rows present in the DOM */
}

获取行数：

// get all the .col elements
const columnRows = document.querySelectorAll('.col');
// instantiate an array and set it to empty, this will
// hold all the divs lengths or "rows"
const lengthArr = [];
// iterate over the rows and get the length of each columns rows
columnRows.forEach(item => {
  let count = item.children.length
  // push each row length into the array
  lengthArr.push(count);
});
// get the maximum amount of rows
const maxNum = Math.max(...lengthArr);
// set the --col-rows CSS variable using the root HTML element
document.documentElement.style.setProperty(`--col-rows`, maxNum);

.col > div 现在行数是使用 JS 动态创建的，并使用在min-height属性中设置的 CSS 变量使用 CSS 进行布局。

// get all the .col elements
const columnRows = document.querySelectorAll('.col');

// instantiate an array and set it to empty, this will
// hold allt he div lengths or "rows"
const lengthArr = [];

// iterate over the rows and get the length of each columns rows
columnRows.forEach(item => {
  let count = item.children.length
  // push each row length into the array
  lengthArr.push(count);
});

// get the maximum amount of rows
const maxNum = Math.max(...lengthArr);

// set the --col-rows CSS variable using the root HTML element
document.documentElement.style.setProperty(`--col-rows`, maxNum);
:root {
  --col-rows: 0;
  /* this will be set using JS */
}

body {
  font-family: "Inter";
}

.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.wrapper-inner {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
}

.wrapper .col {
  width: 30%;
}

.wrapper .col~.col {
  text-align: center;
}

.wrapper .col>div {
  /* the --col-rows variable will be used to calculate 
     the number of elements we have in our rows 
     so they are all take up the same amount of space */
  min-height: calc(100% / var(--col-rows));
  padding: 20px 0;
  border: 1px solid #e1e1e1;
}

.wrapper .col>div:first-child {
  background: red;
}

.wrapper .col>div:nth-child(2) {
  background: blue;
}

.wrapper .col>div:nth-child(3) {
  background: yellow;
}

.wrapper .col>div:nth-child(4) {
  background: blueviolet;
}

.wrapper .col>div:last-child {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrapper-inner">
    <div class="col">
      <div># of virtual attendee tickets (to use as giveaways, remote staff, etc.)</div>
      <div>Named as sponsor on event website</div>
      <div>Chair drop (materials provided by sponsor)</div>
      <div>Location of sponsor booth (first come, first served)</div>
      <div>Lorem Ipsum</div>
      <div>Lorem Ipsum</div>
      <div>Lorem Ipsum</div>
      <div>Lorem Ipsum</div>
      <div>John Doe and event team staff wear sponsor T-shirt to Welcome Reception (T-shirt provided by sponsor) </div>
    </div>
    <div class="col">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div class="col">
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
    </div>
    <div class="col">
      <div>Choice of location</div>
      <div>More prominent location on website and conference app</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>4</div>
      <div>some text</div>
      <div>Different text here</div>
      <div>Yet more text that explains something different</div>
    </div>
  </div>
</div>

推荐阅读