如何设置 class=service-block sizes 为统一高度？

Question

我正在调整 hugo 主题的 html / css，但找不到有关将文本框设置为统一高度的资源。图像显示当前框，高度根据文本量而变化。

文本框如下所示：

部分主题 /layouts/partials/service.html 如下所示：

            {{"<!-- /section title -->" | safeHTML }}
            {{ range .Site.Data.service.serviceItem}}
            {{"<!-- Single Service Item -->" | safeHTML }}
            <article class="col-lg-3 col-md-3 col-12 wow fadeInUp" data-wow-duration="500ms">
                <div class="service-block text-center">
                    <div class="service-icon text-center">
                        <i class="{{ .icon }}"></i>
                    </div>
                    <h3>{{ .title }}</h3>
                    <p>{{ .content }}</p>
                </div>
            </article>
            {{"<!-- End Single Service Item -->" | safeHTML }}
            {{ end }}

并且该部分的 CSS 看起来像：

.service-2 .service-item {
  border: 1px solid #eee;
  margin-bottom: 30px;
  padding: 50px 20px;
  transition: all 0.3s ease 0s;
}

.service-2 .service-item:hover {
  box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
}

.service-2 .service-item:hover i {
  background: #fff;
  color: #57cbcc;
}

.service-2 .service-item i {
  font-size: 30px;
  display: inline-block;
  background: #57cbcc none repeat scroll 0 0;
  border-radius: 30px;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  height: 200px;
  line-height: 55px;
  margin-bottom: 20px;
  width: 55px;
  transition: all 0.3s ease 0s;
}

有没有办法在这些文本框上设置固定高度？

Answer 1

function getHeight(el) {
  var styles = window.getComputedStyle(el);
  var height = el.offsetHeight;
  var borderTopWidth = parseFloat(styles.borderTopWidth);
  var borderBottomWidth = parseFloat(styles.borderBottomWidth);
  var paddingTop = parseFloat(styles.paddingTop);
  var paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

var heightList = [];
document.querySelectorAll('.service-block').forEach(function(el) {
  heightList.push(getHeight(el))
})

var maxHeight = Math.max.apply(Math, heightList);
document.querySelectorAll('.service-block').forEach(function(el) {
  el.style.height = maxHeight + "px";
})

.service-block {
  width: 100px;
  background-color: #eee;
  padding: 10px;
}

.service-block p {
  word-break: break-all;
}

.col-md-3 {
  width: 33%;
  float: left;
}

<body>
  <div class="row">
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content.content.content.content.content.content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.content</p>
      </div>
    </div>
  </div>
</body>

这是我的方法，获取最大高度并将其设置到每个容器。

Answer 2

这项工作不需要 js。将 display: flex 添加到块的容器中即可。容器的较短子项将 "grow up" 适合容器。

.flexcontainer{
  display: flex;
}

.flexchild{
  border: solid;
  word-wrap: break-word;
  width: 100px;
  
}

<div class="flexcontainer">
  <div class="flexchild">
    <h3>title </h3>
    <p>asdf</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
  <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
  </div>
  
  
</div>

codepen

I find this flexbox guide to be useful

如何设置 class=service-block sizes 为统一高度？

How to set class=service-block sizes to a uniform height?

html

css

bootstrap-4

blogdown