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未受影响。

width: xxem

如何在CSS中纵向和横向对齐？

4 个答案: