使用CSS等于等高div

Question

我有3个浮动<div> ，它们被包装器包围。

我遇到的问题是3个div的长度必须相同，但是由于它们具有响应能力，因此无法将其固定为固定高度。

我在stackoverflow上搜索，发现了以下信息： 使浮动div高度相同

我试过了，但是无法正常工作。

我创建了一个小提琴，中间的一列具有最多的文本，因此其他两列也应与此高度匹配。

 * { box-sizing: border-box; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ } #iconWrapper { display: table; margin-top: 50px; height: 500px; } .icon { float: left; width: 33.3%; text-align: center; } .explanation { text-align: left; width: 90%; min-height: 200px; margin: 0 auto; margin-top: 40px; border-radius: 10px; padding: 20px; margin: 20px; } .boxOrange { border: 2px solid RGBa(213, 99, 42, .4); } .boxBeige { border: 2px solid RGBa(211, 200, 175, .4); } .boxGreen { border: 2px solid RGBa(137, 176, 185, .4); } 

 <div id="iconWrapper"> <div class="icon"> <img src="img/icon3.png" /> <div class="explanation boxGreen"> <h2 class="green">IT Support</h2> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> <div class="icon"> <img src="img/icon1.png" /> <div class="explanation boxOrange"> <h2 class="orange">Communications</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> <div class="icon"> <img src="img/icon2.png" /> <div class="explanation boxBeige"> <h2 class="beige">Cloud Solutions</h2> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> </div> 

JS FIDDLE： http ： //jsfiddle.net/Qv8ak/

Answer 1

您的.icon类向左浮动导致问题-您需要添加：“ display：table-cell;” 到您的.explanation类。

祝好运！

迷上了小提琴： http : //jsfiddle.net/Qv8ak/10/

.explanation {
    display: table-cell;
}

很抱歉，答案太小-我是新来的！

编辑：更新了小提琴链接以解决评论部分中描述的问题。

更多信息： http : //www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

Answer 2

使用display:table-cell; 在您的.icon类别和height:100%在.explanation height:100%

jsFiddle

.icon {
    display:table-cell;
    height: 100%;  /* Firefox Fix as per tsHunter */
    width:33.3%;
    text-align:center;
}
.explanation {
    text-align:left;
    width:90%;
    height: 100%;
    margin: 0 auto;
    margin-top:40px;
    border-radius:10px;
    padding:20px;
    margin:20px;
}

Answer 3

您需要将display: table-cell添加到.icon ，并将height:100%到.icon和.explanation 。

jsFiddle

Answer 4

供以后遇到此问题的人员参考，如果古老的浏览器支持不是问题，则可以使用css3 flexible box实现等高列。

您要做的就是将display:flex应用于父元素：

 * { box-sizing: border-box; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ } #iconWrapper { display: flex; margin-top: 50px; } .icon { display: flex; width: 33.3%; text-align: center; } .icon::after { clear: both; } .explanation { text-align: left; width: 90%; min-height: 200px; margin: 0 auto; margin-top: 40px; border-radius: 10px; padding: 20px; margin: 20px; } .boxOrange { border: 2px solid RGBa(213, 99, 42, .4); } .boxBeige { border: 2px solid RGBa(211, 200, 175, .4); } .boxGreen { border: 2px solid RGBa(137, 176, 185, .4); } 

 <div id="iconWrapper"> <div class="icon"> <div class="explanation boxGreen"> <img src="img/icon3.png" /> <h2 class="green">IT Support</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> <div class="icon"> <div class="explanation boxOrange"> <img src="img/icon1.png" /> <h2 class="orange">Communications</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> <div class="icon"> <div class="explanation boxBeige"> <img src="img/icon2.png" /> <h2 class="beige">Cloud Solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p> </div> </div> </div> 

JSFiddle

旁注：在这个特定问题的情况下，为实现相同的布局，标记需要稍作更改。 正如我之前提到的，我将其留给以后参考，因为flex是布局的新方法，而不是float 。 是时候开始将float用作其实际含义了：）