如何将class = service-block的大小设置为统一的高度？

问题描述 投票：1回答：2

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

文本框看起来像：

enter image description here

主题主题/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;
}

是否可以在这些文本框中设置固定高度？

html css bootstrap-4 blogdown
2个回答
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>

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

0
投票

您不需要js来完成这项工作。将display: flex添加到块的容器中即可。容器的较短子代将“长大”以适合容器。

.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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.