如何解决等高柱

Question

我想制作相同的三栏。我正在使用bootstrap。

<div class="container">
    <div class="row">

        <div class="col-md-4 nopadding">
            <div class="in">
                    <div class="icon-introduction"></div>
                    <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

                    </p>

            </div>
        </div>

        <div class="col-md-3 nopadding hidden-sm hidden-xs">
            <div class="image">
              <div id="image-introduction">
              <img src="images/sms.png" id="sms-icon">
                    <img src="images/men.png">
              </div>
            </div>
        </div>
        <div class="col-md-4 nopadding">
            <div class="in">
                <div class="icon-introduction blue"></div>
                    <div class="clearfix"></div>
                    <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. 
                     It has survived not only five centuries, but also the leap into electronic typesetting, 
                     remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                     and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>
                </div>
        </div>
    </div>
</div>

我看到了其他页面，但我无法解决这个问题 我正在使用display：table但它没有改变。
Fiddle

Answer 1

见到这一点，http://jsfiddle.net/1s4ut87L/1/

您已为.in定义了最小高度，请将其更改为height属性

.in{
    width: 100%;
    height: 197px;
    background: #ddd;
    float: left;
    width: 30%;
    overflow:auto;
}

并设置overflow:auto;

修改

根据OP的评论，所有列的高度应等于最大的div。

所以我改变了我的小提琴， 请参阅此http://jsfiddle.net/1s4ut87L/7/

这就是整个css，

.row{
   display:table;
}
.nopadding{
     display:table-cell;
    background: #ddd;   
}

.image{
    background: #FFF;   
    height:100%;
    background-color: red;
}

Answer 2

你可以试试这个。它不是完美的选择，但它会起作用。

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}