Come allineare sia verticalmente che orizzontalmente in CSS?

Question

Ho una scatola come questa:

<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> 

Aggiunta po 'di stile rendono simile a questa:

Ho provato con vertical-align come questo:

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

e funziona. Ma non so come fare a align vertical at bottom in modo che tutto lo spazio bianco arrivi anche in fondo.

Quindi lo spazio bianco sotto le note e risolto domanda e risposta white background arriva fino in fondo.

voglio colmare tali lacune con uno spazio bianco:

Answer 1

Utilizzare flexbox.

ho usato questo 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; 
} 

vedere il risultato su JSfiddle.

Answer 2

Il modo più semplice per fare ciò che si sta cercando di fare è quello di utilizzare le proprietà CSS display: table.

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 con uno stile simile al tuo.

Answer 3

ho ottenuto che funziona impostando tutto per un'altezza di 100% in questo modo: http://jsfiddle.net/sur38w6e/

tuo html era intatto.

.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

Un'altra alternativa che utilizza jquery. Ecco lo 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; 
}