Как установить класс = размер сервисного блока равной высоте? - PullRequest
Новая
       6

Как установить класс = размер сервисного блока равной высоте?

1 голос
/ 25 октября 2019

Я настраиваю html / css для темы hugo, но не могу найти ресурсы для установки текстовых полей на одинаковую высоту. На рисунке показаны текущие поля, высота которых зависит от объема текста.

Текстовые поля выглядят следующим образом:

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;
}

Есть ли способ установить фиксированную высоту для этихтекстовые поля?

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Вам не нужны 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

Я считаю это руководство по работе с флексбоксом полезным

1 голос
/ 25 октября 2019 

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>

Это мой способ, получить максимальную высоту и установить ее для каждого контейнера.

...