css - 我需要每一行具有相同的高度

Question

我需要让 div 看起来像表格数据，我使用了 display: table-cell 和 display: table 属性，但我没有得到预期的布局。我需要每一行具有相同的高度。 请检查下面的代码

.publishers {
    margin: 45px 0;
    margin-right: 60px;
}

    .publishers .col-xs-6:nth-child(odd) .publisher {
        margin-right: -10px;
    }

    .publishers .col-xs-6:nth-child(even) .publisher {
        margin-left: -10px;
    }

    .publishers .publisher {
        background-color: #f1efef;
        margin-bottom: 10px;
    }

        .publishers .publisher .media {
            padding: 10px;
        }

            .publishers .publisher .media .media-left img {
                width: 128px;
                height: 128px;
            }

            .publishers .publisher .media .media-body h3 {
                font-size: 30px;
                font-weight: 400;
            }


/***** my try *****/
.publishers{
display:table;
  }
.publishers .publisher{
  display: table-cell;
  }

  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<section class="publishers">
<div class="row">
<div class="col-xs-6">
                                    <div class="publisher">
                                        <div class="media">
                                            <div class="media-left">
                                                <a style="  height: 131px; display: block;" href="http://www.cengage.com
">
                                                    <img style="  height: auto;" src="Publishers/7726f4a3-b23d-4af1-879d-57da2a567bd1.jpg" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                               <a href="http://www.cengage.com
"><h3>Cengage</h3></a>
                                                <p class="description">A company that delivers highly..
</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

<div class="col-xs-6">
                                    <div class="publisher">
                                        <div class="media">
                                            <div class="media-left">
                                                <a style="  height: 131px; display: block;" href="http://www.elsevier.com
">
                                                    <img style="  height: auto;" src="Publishers/b3723614-ea79-4b24-a9fb-ae0c1da9a3c4.png" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                               <a href="http://www.elsevier.com
"><h3>Elsevier </h3></a>
                                                <p class="description">A world’s leading publisher of science and health information serves more than 30 million scientists, students and health and information professionals worldwide
</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
  <div class="col-xs-6">
                                    <div class="publisher">
                                        <div class="media">
                                            <div class="media-left">
                                                <a style="  height: 131px; display: block;" href="http://eu.wiley.com/WileyCDA/Section/index.html 
">
                                                    <img style="  height: auto;" src="Publishers/ff9e4261-36a1-4cd3-bf9c-c169ff8661eb.png" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                               <a href="http://eu.wiley.com/WileyCDA/Section/index.html 
"><h3>WILEY</h3></a>
                                                <p class="description">Wiley is a global publisher of print and electronic products, textbooks, and other educational materials, for students both undergraduate and postgraduate, specializing in scientific, technical, and medical books and journals; professional and consumer books and subscription services. Wiley has approximately 22,700 active titles and 400 journals, and publishes 2000 new titles in a variety of print and electronic formats each year
</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
  <div class="col-xs-6">
                                    <div class="publisher">
                                        <div class="media">
                                            <div class="media-left">
                                                <a style="  height: 131px; display: block;" href="https://www.pearson.com/
">
                                                    <img style="  height: auto;" src="Publishers/d18fbae5-1587-4b06-a0e4-8b0b1ec4ab13.jpg" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                               <a href="https://www.pearson.com/
"><h3>Pearson</h3></a>
                                                <p class="description">Global leader in educational publishing offers comprehensive range of educational programs, in all subjects, for every age and level of student, from preK-12 through higher education and on into professional life. 
</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
  </div>
  </section>

Answer 1

.publishers .row {
  display: flex;
}

如果你不需要 IE9 和更低版本的支持，你可以使用 flex 默认情况下使用 align-items: stretch 这使得所有的 child 都是全高