Question

我希望所有H3标签的高度都相等。我使用了flex但在某种程度上陷入了困境。
因此，我需要帮助，请为给定的html和css建议CSS。

示例代码：Demo

下面是HTML


  <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
        <div class="post-body clearfix">        
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p> 
        </div>
    </div>
  </div>

   <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</h3>
        <div class="post-body clearfix">        
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
        </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">How can non-profits leverage predictive analytics to build forecasting models?</h3>
        <div class="post-body clearfix">        
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> 
        </div>
    </div>
  </div>  
</section>

Answer 1

这是你的意思吗？

h3{
  height:40px;
}

Answer 2

这是另一种解决方法，

const container = document.querySelector('.fix-h3-heights');
const titles = container.querySelectorAll('h3');

const heights = [];
for (const title of titles) {
  heights.push(+title.clientHeight);
}

const minHeight = Math.max(...heights);
for (const title of titles) {
  title.style.height = minHeight + 'px';
}

.row {
  display: flex;
  flex-flow: row wrap;
  background: pink;
  margin: -8px;
}

.col {
  display: flex;
  flex: 1 0 400px;
  flex-flow: column;
  margin: 10px;
  background: grey;
}

.card {
  display: flex;
  padding: 20px;
  height: 100%;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
}

<div class="row fix-h3-heights">

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
      <div class="post-body clearfix">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
        </p>
      </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</h3>
      <div class="post-body clearfix">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">How can non-profits leverage predictive analytics to build forecasting models?</h3>
      <div class="post-body clearfix">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
      </div>
    </div>
  </div>

</div>

Answer 3

使用CSS网格：

这是CodePen

* {
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-row-gap: 30px;
}

.description {
  background: blue;
  grid-column: 1 / span 4;
}

<div class="container">

  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>


  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>

  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia. Lorem ipsum in ut amet
    aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia. Lorem ipsum in ut amet aute eu nulla labore
    do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>

</div>

您可以进一步自定义CSS

使所有内部子代的高度相等

3 个答案: