在路上
Lorem Ipsum 只是印刷和排版行业的虚拟文本。
底部内容分区
在以下示例中， <div> 的内容与右侧的底部对齐。
将内容对齐到右下角的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position: relative;
}
.column1 {
color: #4287f5;
text-align: center;
}
.column2 {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>onitroad</h2>
</div>
<div class="column2">
经历过风雨，才懂得阳光的温暖。
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
</html>
在我们的下一个示例中， <div> 的内容在中心与底部对齐。
我们将底部 <div> 的宽度设置为“100%”。
将内容与中心底部对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position: relative;
text-align: center;
}
.column1 {
color: #4287f5;
}
#bottom {
position: absolute;
bottom: 0;
width: 100%;
color: #ffffff;
background-color: blue;
padding: 15px 0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>onitroad</h2>
</div>
<div class="column2">
经历过风雨，才懂得阳光的温暖。
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
</html>
让我们看另一个例子，其中 <div> 的内容与 flexbox 中心对齐。
Flexbox 是一种单维布局，这意味着它一次将项目放置在一维中，可以是一行，也可以是列，但不能同时放置。
在以下示例中，我们将 flex-direction 属性与“column”值一起使用。
flex-direction 属性定义了 flex 容器的主轴并设置了 flex 项目出现的顺序。
当项目未水平使用所有可用空间时， justify-content 属性会对齐项目。
当项目的行之间有空格时，“space-between”值与 justify-content 属性一起使用。
justify-content 属性必须与设置为“flex”的显示属性一起使用。
要垂直对齐项目，请使用 align-items 属性。
使用 Flexbox 将内容底部对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
main {
border: 1px solid blue;
height: 150px;
display: flex;/* defines flexbox */
flex-direction: column;/* top to bottom */
justify-content: space-between;/* first item at start, last at end */
}
h2 {
margin: 0;
}
</style>
</head>
<body>
<main>
<h2>Header title</h2> Some text aligns to the bottom
</main>
</body>
</html>
下面，我们可以看到另一个带有 CSS align-items 属性的示例。
它定义了弹性项目的默认对齐方式。
它就像 justify-content 属性，但是是垂直版本。
某些浏览器不支持 display: flex。
使用下面列出的前缀。
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
我们必须使用带有 align-items 属性的 -Webkit- 和 -Moz- 扩展，以便所有浏览器都支持它。
使用 align-items 属性将内容对齐到底部的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
main {
border: 1px solid green;
background-color: green;
color: #ffffff;
padding: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
flex-direction: column;
}
h2 {
margin: 0;
}
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
margin: 0;
}
</style>
</head>
<body>
<main>
<h2>Header title</h2>
<p>Some text aligns to the bottom</p>
</main>
</body>
</html>
让我们再看一个带有 position 属性的例子。
在我们的第一个示例中，我们使用带有 HTML <main> 标记的“relative”值和 <div> 的“fixed”值的位置属性。
z-index 属性指定元素及其后代或者弹性项目的 z 顺序。
z-index 属性只对定位的元素有影响。
将内容与位置属性的“固定”值对齐到底部的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
position: relative;
}
div {
background-color: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<main>
<h2>This is the header</h2>
<div>有些文字底部对齐</div>
</main>
</body>
</html>
创建 HTML
- 创建一个带有“main”类的 <div>。它包括另外三个 <div> 元素。
- 在第一个 <div> 中放置一个 <h2> 标签，它的类名为“column1”，其中写入一些内容。
- 第二个 <div> 具有名称为“column2”的类。
- 第三个 <div> 有一个名为“bottom”的 id。
<body>
<div class="main">
<div class="column1">
<h2>onitroad</h2>
</div>
<div class="column2">
经历过风雨，才懂得阳光的温暖。
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
CSS 允许我们使用特殊技术将 <div> 元素的内容与底部对齐。
此外，我们可以将内容对齐到 <div> 的顶部、左侧或者右侧的底部。
我们将讨论所有可能的变体。
如果我们按照下面描述的步骤操作，这将非常容易。
让我们看一个例子，并尝试一起讨论代码的每个部分。
添加 CSS
- 使用边框、高度、宽度和位置属性来设置“主”类的样式。
float 属性定义元素应该放置在容器的哪一侧。 position 属性指定元素在文档中的位置。
- 为第一个 <div> 的文本设置颜色。
在本例中，我们为颜色使用“十六进制”值。
- 使用 text-align 属性对齐块元素的内部内容。
- 使用底部和左侧属性。
底部属性与位置属性一起指定元素的底部位置。 left 属性与 position 属性一起指定元素的左侧位置。
如果元素绝对定位（位置：绝对），则忽略 float 属性。
.main {
border: 1px solid #4287f5;
height: 180px;
width: 500px;
position: relative;
}
.column1 {
color: #4287f5;
text-align: center;
}
.column2 {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
}
让我们把代码的各个部分放在一起，看看它是如何工作的！
将内容对齐到左下角的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.main {
border: 1px solid #4287f5;
height: 180px;
width: 500px;
position: relative;
}
.column1 {
color: #4287f5;
text-align: center;
}
.column2 {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>onitroad</h2>
</div>
<div class="column2">
经历过风雨，才懂得阳光的温暖。
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
</html>