如何在 CSS 中垂直和水平对齐？

Question

我有一个这样的盒子：

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

添加一点样式使它看起来像这样：

我试过像这样使用vertical-align：

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

它有效。但是我不知道怎么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

使用 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;
}

Answer 4

我通过将所有内容设置为 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%;
}