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，这样可以让所有孩子都达到全高

Answer 2

如果内容是静态的，那么你可以获取最长div的高度并分配给所有内容。

如果内容是动态的，那么：

 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

Answer 3

你可以循环遍历每个.features，找到max然后将该高度应用于同一类的所有块。

$(document).ready(function() {
  var blockHeights;
  blockHeights = [];
  $('.features').each(function() {
    blockHeights.push($(this).height());
  });
  $('.features').height(Math.max.apply(Math, blockHeights));
});

如果您在文档就绪后通过ajax或其他方法加载内容，只需将其移动到函数中并在准备就绪时调用它。

可能值得在块上设置高度（或高度：auto）作为样式，因为java脚本已关闭或无法正确加载，只是为了确保内容始终可见。

Answer 4

你快到了。 display:table有效。问题是你的bootstrap正在向你的div添加浮动，这会破坏表格。添加您的css float:none;即可。例如，Jsfiddle：http://jsfiddle.net/42dy9aLm/

我需要每一行都有相同的高度

4 个答案: