MDL卡片定位在HTML内
MDL card positioning within HTML
我对 MDL 比较陌生，我正在尝试了解如何将卡片放置在我拥有的一段文本内或旁边。我非常接近，但我尝试了很多不同的方法，但我似乎没有得到我想要的结果。
我希望文本位于左侧（我很满意它现在的位置），右侧有两张宽 MDL 卡片，一张叠在一起，与文本一致。
到目前为止我有：
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a href="index.html">Home</a>
<a href="wall.html">Wall</a>
<a class="active" href="shop.html">Shop</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<a href="http://twitter.com/wooly_box" target="_blank"><img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20"></a>
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">woolyBox ltd.</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</p></div>
</body>
和CSS：
html, body {
height: 100%;
min-height: 100%;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #fafafa;
position: relative;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
font-family: 'Courier New', Courier, monospace;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: right;
font-family: 'Courier New', Courier, monospace;
}
.header {
overflow: hidden;
background-color: #ffffff;
}
.header a {
float: left;
color: grey;
text-align: center;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
color: black;
}
.header a.active {
color: #f4d442;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.content {
padding: 16px;
}
.boxed{
width: 50vw;
height: 60vh;
box-align: left;
text-align: justify;
padding: 5%;
background-color: #fff;
margin: 5%;
margin-left: 5%;
}
/* .image {
} */
.boxed-1 {
width: 25%;
height: 100%;
text-align: justify;
padding-top: 10%;
background-color: #fff;
margin: 0 auto;
margin-left: 5%;
margin-right: 80%;
}
.container-wrapper{text-align:center;}
.container-1,
.container-2,
.container-3{width:475px; height:400px; display:inline-block; margin-left:10px; font-family: 'Courier New', Courier, monospace;}
.container-1{background:grey; margin-left:0;}
.container-2{background:grey;}
.container-3{background:grey;}
@media all and (max-width: 650px) {
.container-1{
width:100%;
display:block;
margin:0;
}
.container-2{
width:100%;
display:block;
margin:0;
}
.container-3{
width:100%;
display:block;
margin:0;
}
}
.card-img-top {
height: 200px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.card {
margin: 0 auto;
float: none;
margin-bottom: 5px;
}
.card-text {
color: grey;
text-align: justify;
padding: 5px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 25px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.demo-card-square.mdl-card:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.demo-card-square > .mdl-card__title {
color: #fff;
background: #03a9f4;
}
.demo-card-square > .mdl-card__accent {
background: #ff9800;
}
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
有人能指出我哪里出错的正确方向吗？
有多种方法可以获得您正在寻找的布局。一个简单的方法是使用 flexbox. Below is a minimal example of a Material Design Lite 布局，其中包含页眉、主要内容和包含您描述的文本和卡片定位的页脚。
您会看到 main html 元素设置为 display: flex，并且 align-items: center 并排显示其子元素并在中间垂直对齐（如果您正在寻找其他垂直对齐方式，您可以尝试不同的 align-items 选项）。这些卡片被包裹在 div 中，以便它们与文本一起堆叠显示（而不是并排显示）。
.mdl-layout__content main {
padding: 16px;
display: flex;
align-items: center;
}
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite layout example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__content">
<main>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<!-- close cards -->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</footer>
</div>
<!-- close mdl-layout__content -->
</div>
<!-- close mdl-layout -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
在您自己的 html 中，您似乎在某些地方使用 p 标签作为中断而没有关闭标签（有一个 br 标签更适合你想要什么，但我建议不要这样做，因为你可以通过在你的 css 中设置适当的 margin and/or padding 值来获得你正在寻找的东西。您还忘记关闭 footer 标签。您可以使用 html validator 来帮助您清理此类语法问题。
我对 MDL 比较陌生，我正在尝试了解如何将卡片放置在我拥有的一段文本内或旁边。我非常接近，但我尝试了很多不同的方法，但我似乎没有得到我想要的结果。
我希望文本位于左侧（我很满意它现在的位置），右侧有两张宽 MDL 卡片，一张叠在一起，与文本一致。
到目前为止我有：
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a href="index.html">Home</a>
<a href="wall.html">Wall</a>
<a class="active" href="shop.html">Shop</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<a href="http://twitter.com/wooly_box" target="_blank"><img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20"></a>
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">woolyBox ltd.</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</p></div>
</body>
和CSS：
html, body {
height: 100%;
min-height: 100%;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #fafafa;
position: relative;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
font-family: 'Courier New', Courier, monospace;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: right;
font-family: 'Courier New', Courier, monospace;
}
.header {
overflow: hidden;
background-color: #ffffff;
}
.header a {
float: left;
color: grey;
text-align: center;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
color: black;
}
.header a.active {
color: #f4d442;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.content {
padding: 16px;
}
.boxed{
width: 50vw;
height: 60vh;
box-align: left;
text-align: justify;
padding: 5%;
background-color: #fff;
margin: 5%;
margin-left: 5%;
}
/* .image {
} */
.boxed-1 {
width: 25%;
height: 100%;
text-align: justify;
padding-top: 10%;
background-color: #fff;
margin: 0 auto;
margin-left: 5%;
margin-right: 80%;
}
.container-wrapper{text-align:center;}
.container-1,
.container-2,
.container-3{width:475px; height:400px; display:inline-block; margin-left:10px; font-family: 'Courier New', Courier, monospace;}
.container-1{background:grey; margin-left:0;}
.container-2{background:grey;}
.container-3{background:grey;}
@media all and (max-width: 650px) {
.container-1{
width:100%;
display:block;
margin:0;
}
.container-2{
width:100%;
display:block;
margin:0;
}
.container-3{
width:100%;
display:block;
margin:0;
}
}
.card-img-top {
height: 200px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.card {
margin: 0 auto;
float: none;
margin-bottom: 5px;
}
.card-text {
color: grey;
text-align: justify;
padding: 5px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 25px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.demo-card-square.mdl-card:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.demo-card-square > .mdl-card__title {
color: #fff;
background: #03a9f4;
}
.demo-card-square > .mdl-card__accent {
background: #ff9800;
}
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
有人能指出我哪里出错的正确方向吗？
有多种方法可以获得您正在寻找的布局。一个简单的方法是使用 flexbox. Below is a minimal example of a Material Design Lite 布局，其中包含页眉、主要内容和包含您描述的文本和卡片定位的页脚。
您会看到 main html 元素设置为 display: flex，并且 align-items: center 并排显示其子元素并在中间垂直对齐（如果您正在寻找其他垂直对齐方式，您可以尝试不同的 align-items 选项）。这些卡片被包裹在 div 中，以便它们与文本一起堆叠显示（而不是并排显示）。
.mdl-layout__content main {
padding: 16px;
display: flex;
align-items: center;
}
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite layout example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__content">
<main>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<!-- close cards -->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</footer>
</div>
<!-- close mdl-layout__content -->
</div>
<!-- close mdl-layout -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
在您自己的 html 中，您似乎在某些地方使用 p 标签作为中断而没有关闭标签（有一个 br 标签更适合你想要什么，但我建议不要这样做，因为你可以通过在你的 css 中设置适当的 margin and/or padding 值来获得你正在寻找的东西。您还忘记关闭 footer 标签。您可以使用 html validator 来帮助您清理此类语法问题。