使用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用作其實際含義了：）