CSSの垂直方向と水平方向の両方の揃え方は？

Question

私はこのようなボックスを持っている：私はこのようなvertical-alignを使用してみましたが

：

.notes-list-box > div { 
    vertical-align: top; 
} 

スタイリングを少し追加

<section class="notes-list-box"> 
    <div class="nn"> 
     <div class="heading">Notes</div> 
     <div class="boxdescription">With our complete study notes, your homework is much easier.</div> 
    </div> 
    <div class="ttn"> 
     <div class="heading">Things To Know</div> 
     <div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div> 
    </div> 
    <div class="vdos"> 
     <div class="heading">Videos</div> 
     <div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div> 
    </div> 
    <div class="sqaa"> 
     <div class="heading">Solved Question and Answer</div> 
     <div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div> 
    </div> 
</section> 

が、それはこのように見えるように

と動作します。しかし、私はどのようにalign vertical at bottomにすべての空白も下に来るように分からない。

したがって、メモの下の空白と解決された質問と回答white backgroundが下から来ます。

私は空白で、これらのギャップを埋めるためにしたい：

Answer 1

flexboxを使用してください。

私はこのCSSを使用：

.notes-list-box { 
    display: flex; 
    font-family: sans-serif; 
} 
.notes-list-box > div { 
    margin: 0 5px; 
    background-color: white; 
} 
.heading { 
    color: white; 
    font-weight: bold; 
    padding: 10px 2px; 
    text-align: center; 
} 
.boxdescription { 
    padding: 5px; 
} 
.nn .heading { 
    background-color: #61B5DF; 
} 
.ttn .heading { 
    background-color: #41AF43; 
} 
.vdos .heading { 
    background-color: #FF8A00; 
} 
.sqaa .heading { 
    background-color: #FF1F2D; 
} 

はJSfiddleの結果を参照してください。

Answer 2

何をしようとする最も簡単な方法は、display: table CSSプロパティを使用することです。あなたに似たスタイリングと

JS Fiddle Here

HTML

<div class="table"> 
    <div class="table-row"> 
    <div class="heading table-cell">Notes</div> 
    <div class="heading table-cell">Things To Know</div> 
    <div class="heading table-cell">Videos</div> 
    <div class="heading table-cell">Solved Question and Answer</div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell">With our complete study notes, your homework is much easier.</div> 
    <div class="table-cell">Things to know provides additional information on every topic which enhance the knowledge of the students.</div> 
    <div class="table-cell">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div> 
    <div class="table-cell">With 100's of solved questions solved, now you can easily prepare your exam for free.</div> 
    </div> 
</div> 

CSS

.table { 
    display: table; 
} 
.table-row { 
    display: table-row; 
} 
.table-cell { 
    display: table-cell; 
    border: 1px solid; 
} 
.heading { 
    vertical-align: middle; 
    text-align: center; 
} 

Here is an update。

Answer 3

私はそれはそうのような100％の高さにすべてを設定することにより、作業ました：http://jsfiddle.net/sur38w6e/

あなたのHTMLはそのままでした。

.notes-list-box>div{ 
float:left; 
width:120px; 
background-color:yellow; 
margin: 5px; 
height:100%; 
overflow:auto; 
} 

.heading{ 
    background-color:red; 
} 

.notes-list-box{ 
    background-color:green; 
    overflow:auto; 
    height:100%; 
} 

body,html{ 
    height:100%; 
} 

Answer 4

jqueryを使用した別の方法です。ここにはfiddleがあります。

JQUERY 

$('.parentheight').each(function(){ 
var maxdivheight = 0; 
$('.childheight',this).each(function(){ 
    var divheight = $(this).height(); 
    // compare height 
    if (divheight > maxdivheight) { 
    maxdivheight = divheight; 
    } else { } 
}); 
// set all divs to max height 
$('.childheight',this).height(maxdivheight); 
}); 

HTML 

<section class="notes-list-box parentheight"> 
    <div class="alignbox nn childheight"> 
    <div class="heading">Notes</div> 
    <div class="boxdescription">With our complete study notes, your homework is much easier.</div> 
    </div> 
    <div class="alignbox ttn childheight"> 
    <div class="heading">Things To Know</div> 
    <div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div> 
    </div> 
    <div class="alignbox vdos childheight"> 
    <div class="heading">Videos</div> 
    <div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div> 
    </div> 
    <div class="alignbox sqaa childheight"> 
    <div class="heading">Solved Question and Answer</div> 
    <div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div> 
    </div> 
</section> 

CSS 

.alignbox { 
    float: left; 
    width: 24%; 
    border: 1px solid red; 
}