作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个这样的盒子:
<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;
}
并且有效。但我不知道如何在底部垂直对齐
,这样所有的空白区域也都到了底部。
所以注释和已解决问题和答案下方的空白 white background
一直到底部。
我想用空白填充这些空白:
最佳答案
使用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 上的结果.
关于html - 如何在 CSS 中同时垂直和水平对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34229614/
我是一名优秀的程序员,十分优秀!