使用css的等高高度div

Question

我有3個漂浮的<div> s，它們被一個包裝物包圍。

我遇到的問題是3格的所有長度必須相同，但由於它們的響應性，它們不能固定高度。

我搜索了計算器，發現這個帖子：Make floating divs the same height

我試過，但不能讓它開始工作。

我創建了一個小提琴，其中中間欄的文字最多，所以其他兩個也應該匹配這個高度。

* { 
 
    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;和height:100%上.explanation

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 2

你.icon類是浮動的左邊，這是造成問題 - 那麼你需要添加： 「顯示：表細胞; 「到你的.explanation類。

祝你好運！

搞砸你的提琴：http://jsfiddle.net/Qv8ak/10/

.explanation { 
    display: table-cell; 
} 

對不起，鬆弛的答案 - 我是新！

編輯：更新小提琴鏈接，以解決評論部分中描述的問題。

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

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 s它實際上意味着什麼:)