时间戳

首页 > 解决方案 > 具有相同高度的 CSS Flex-Box

html - 具有相同高度的 CSS Flex-Box

问题描述

谁能说出为什么盒子的高度不一样？我找不到重点。无论文本长度如何，我都想让三个盒子彼此正确，并且所有盒子的高度都相同。

#article-grid article.et_pb_post {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 40px;
  line-height: 2em;
  width: 23%;
  background: #f2f2f2;
  list-style: none;
  padding-bottom: 10px;
  padding-left: 24px;
  padding-right: 24px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #aaa;
  height: 100%;
}
<div id="main-content">
  <div id="article-grid" class="et_pb_module">
    <div class="et_pb_ajax_pagination_container">

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 1</h2>
        <div class="post-content">
          <p>BOX1
            <p>
              <p>gfdfjgsdjfgjsgdfjhsgd hfdjkfh sdkh kjhfg jhgds hdskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 2</h2>
        <div class="post-content">
          <p>BOX2
            <p>
              <p>gfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkgfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkgfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 3</h2>
        <div class="post-content">
          <p>BOX3
            <p>
              <p>gfdfjgs fdhkgh khlfdkhfd klhg klh khdjfgjsgdfjhsgdjhfg jhgds hdskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 4</h2>
        <div class="post-content">
          <p>BOX4
            <p>
              <p>gfdfjgsdjfgjsgdfjhsgdjhfg jhgds fgölkglfdgkh fdjklhgdlgkls hdkh kg ugildskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

    </div>
    <!-- .et_pb_posts -->
  </div>
</div>
<!-- #main-content -->

标签： htmlcssflexbox

解决方案

我已经更新了您将display:flex放入错误类的代码，它应该放入所有 Box 的父 div 中。

#article-grid article.et_pb_post {
/*   display: -webkit-flex; */
/*   display: flex; */
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 40px;
  line-height: 2em;
  width: 23%;
  background: #f2f2f2;
  list-style: none;
  padding-bottom: 10px;
  padding-left: 24px;
  padding-right: 24px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #aaa;
  height: 100%;
}

.et_pb_module {
  display: flex;
}
<div id="main-content">
  <div id="article-grid" class="et_pb_module">
    <div class="et_pb_ajax_pagination_container">

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 1</h2>
        <div class="post-content">
          <p>BOX1
            <p>
              <p>gfdfjgsdjfgjsgdfjhsgd hfdjkfh sdkh kjhfg jhgds hdskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 2</h2>
        <div class="post-content">
          <p>BOX2
            <p>
              <p>gfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkgfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkgfdfjgds hdskfh s dgh fdhg fdkjhgkfdh gklh kfgh fdkdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 3</h2>
        <div class="post-content">
          <p>BOX3
            <p>
              <p>gfdfjgs fdhkgh khlfdkhfd klhg klh khdjfgjsgdfjhsgdjhfg jhgds hdskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

      <article class="et_pb_post">
        <h2 class="entry-title">BOX 4</h2>
        <div class="post-content">
          <p>BOX4
            <p>
              <p>gfdfjgsdjfgjsgdfjhsgdjhfg jhgds fgölkglfdgkh fdjklhgdlgkls hdkh kg ugildskfh sdkh</p>
        </div>
      </article>
      <!-- .et_pb_post -->

    </div>
    <!-- .et_pb_posts -->
  </div>
</div>
<!-- #main-content -->

推荐阅读