时间戳

首页 > 解决方案 > 每行所有列的高度相等

javascript - 每行所有列的高度相等

问题描述

首先，我使用的是引导程序和 jquery。所以我试图在所有列之后获得第一个子类

var one = $(".col-x .some-class")

然后我想得到所有高度的.some-class高度并检查它们之间的最高点

究竟要达到什么目的：

1-通过添加顶部和底部填充来获得最高高度.some-div并使其他高度相等

2-我想为每一行制作这个函数，但每一行都应该得到最高的高度.some-class

如果您不理解我，请告诉我给您一个代码示例。

这是 jsfiddle 演示：https ://jsfiddle.net/Devel0per95/g2eo4n38/2/

标签： javascriptjqueryhtmlcsstwitter-bootstrap

解决方案

像这样的东西：https ://jsfiddle.net/g2eo4n38/4/ ？

function fixHeight() {
  // 1. Find the tallest element
  var tallest = 0
  $(".blog-item").each(function() {
    var height = $(this).height();
    if (height > tallest) {
        tallest = height;
    }
  });

  // 2. Adjust the height of the elements
  $(".blog-item").each(function() {
    $(this).height(tallest);
  });
}

fixHeight();

另一种方法是使用 CSS 网格，像这样（这样你就不必使用 JS 进行样式设置，这很好）：

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
}

.blog-item{
    background-color: #f6f7f7;
    border-radius: 3px;
    padding: 15px;
    margin-bottom: 30px;
}
.blog-item .subtitle-item {
    font-weight: bold;
    color: #ffbd1f;
}
.blog-item-title{
    text-transform: uppercase;
    margin-bottom: 30px
}
.blog-item-title h3{color: #333;}
.blog-item-title h3, .blog-item-title p {transition: 0.3s;}
.blog-item-title a:hover h3, .blog-item-title a:hover p {opacity: 0.6;}
.blog-item-body{margin-bottom: 15px;}

.blog-item-tags ul li{
    border: 1px solid #dcdcdc;
    display: inline-block;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 20px;
    padding: 5px 10px;
    transition: 0.3s;
    cursor: pointer;
}
.blog-item-tags ul li:hover{
    background-color: #ffbd1f;
    color: #fff;
    border-color: #ffbd1f;
}
.blog-item a{
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.3s;
}
.blog-item a:hover {color: #ffbd1f;}
.blog-item a .fa{
    font-weight: bold;
    font-size: 16px; 
}
.blog-item.featured{background-color: #ffbd1f;}
.blog-item.featured .blog-item-title p, .blog-item.featured .blog-item-title h3, .blog-item.featured p, .blog-item.featured a {
    color: #fff !important;
}
.blog-item.featured ul li {
    color: #fff !important;
    background-color:#dda114;
    border-color: transparent;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div id="grid">
  <div class="blog-item bg featured">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Market Outlook</p>
        <h3 class="m-0">4Q 2018 Off-Grid And Mini-Grid Market Outlook</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>Acquisitions, partnerships, and new technology capabilities
        dominated
        the microgrid news flow in the past few months. Project activity…&lt;/p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
  <div class="blog-item">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Insight</p>
        <h3 class="m-0">Distributed Energy in Emerging Markets</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>Advances in distributed technologies at the frontiers of today’s
        energy
        system can now provide power where the traditional grid is…&lt;/p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
        <li>Tag #3</li>
        <li>Tag #4</li>
        <li>Tag #5</li>
        <li>Tag #6</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
  <div class="blog-item">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Insight</p>
        <h3 class="m-0">Clean Energy And The Paris Promises</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>The 2015 Paris Agreement saw virtually every nation on earth pledge
        to
        address the threat of climate change. Each country’s Nationally…&lt;/p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
        <li>Tag #3</li>
        <li>Tag #4</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
</div>

推荐阅读