说我有以下CSS和HTML代码:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>标题部分是固定高度,但标题内容可能会更改.我想将标题的内容垂直对齐到标题部分的底部,因此最后一行文本"粘贴"到标题部分的底部.
因此,如果只有一行文字,那就像:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
如果有三行:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
怎么能在CSS中完成？
在CSS中是否有一种方法可以让元素表现得像右边的图片？元素的顺序并不重要,但是当人调整页面大小时,tile需要从下到上而不是自上而下占用空间.
NORMAL DESIRED
|---------| |---------|
| A B C D | | I |
| E F G H | | E F G H |
| I | | A B C D |
|---------| |---------|
示例代码:
<html>
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span …