文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将class=service-block大小设置为统一的高度？

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

Stack Overflow用户

提问于 2019-10-25 23:52:37

回答 2查看 141关注 0票数 0

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

文本框如下所示：

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

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

blogdown

html

css

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-28 07:26:54

这项工作不需要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

票数 1

Stack Overflow用户

发布于 2019-10-26 00:35:24

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>

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58561893

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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