Question

我有三列，每一列都有一个类text-container的元素。我希望它们都与最高的一样高，而不使用JavaScript。

这是代码：

<div class="column">
    <!--more elements-->

    <div class="text-container">
        <!--some text-->
    </div>
</div>

<div class="column">
    <!--more elements-->

    <div class="text-container">
       <!--some longer text-->
    </div>
</div>

<div class="column">
   <!--more elements-->

    <div class="text-container">
        <!--some shorter text-->
    </div>
</div>

有没有办法在不使用JavaScript的情况下使text-container达到相同的高度？我知道flexbox可以做到这一点，但是如果所有元素都在flexbox元素内..

Answer 1

我不做很多香草js，但这是一个jQuery解决方案：

＆＃13;

 $(document).ready(function() {
   var maxHeight = -1;
   var col = $('.text-container');
   
   col.each(function() {
     maxHeight = Math.max(maxHeight, $(this).height());
   });

   col.height(maxHeight);
 });

＆＃13;

.container {

    overflow: hidden; /* optional */

}

.column {
    margin:2px;  
    float:left;
    border: 1px solid red;
    height:200px;
  
}

.column .text-container {
    margin:2px;
    border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="column">
        <div class="text-container">
           hello world!  
        </div>
    </div>

    <div class="column">
        <div class="text-container">
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        <div class="text-container">
            hello world! <br /> 
            hello world! <br /> 
            hello world!
        </div>
    </div>
</div>

＆＃13;

Answer 2

尝试使用facebook developers debug page。

首先，添加容器类以包含您的列（如果尚未包含）。接下来，通过添加display: flex;（和必要的供应商前缀）使其成为flexbox。此外，如果您愿意，可以添加height: 100%和overflow: hidden。

在您的列类中，通过添加display: flex;使其成为Flexbox。然后，通过将flex-direction设置为column并添加flex: 1;以使其增长，为其提供垂直布局。

最后，将flex: 1;添加到文本容器类中。

.container {
    display: -webkit-flex; /* chrome, safari */
    display: -ms-flexbox; /* internet explorer */
    display: flex;
    overflow: hidden; /* optional */
    height: 100%;
}

.column {
    display: -webkit-flex; /* chrome, safari */
    display: -ms-flexbox; /* internet explorer*/
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid red;
}

.column .text-container {
    flex: 1;
    border: 1px solid blue;
}

<div class="container">
    <div class="column">
        hello!

        <div class="text-container">
            hello world! <br /> 
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        hello!

        <div class="text-container">
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        hello! <br />
        hello! <br />
        hello! <br />
        hello!

        <div class="text-container">
            hello world!
        </div>
    </div>
</div>

如果由于兼容性原因或其他原因（虽然已经是2016年），您更喜欢Flexbox以外的其他内容，请查看Flexboxes或this article。

如何在没有javascript的情况下使三个元素高度相同？

2 个答案: