html - 盒子的最后一部分（底部）
问题描述
我需要将每本书的底部设置为底部。我不知道该怎么做。我附上了整个 HTML 和 CSS 代码。我不知道我需要做什么才能将页脚保持在底部。我设置了每个单独框的宽度和高度。如果高度停留在“汽车”上；然后他会解决问题的一部分。我不知道该怎么办。我需要这个代码。
@import url(https://fonts.google.com/specimen/Roboto);
.books{
font-size: 21px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-top: 3%;
margin-left: 290px;
margin-right: 290px;
min-height: 60px;
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
}
.box-area {
padding-top: 2%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.single-box {
box-shadow: 0px 0px 3px 0.1px #888888;
position: relative;
flex-direction: column;
align-items: left;
justify-content: left;
width: 320px;
height: 280px;
background: linear-gradient(90deg, #d1f6f1 30%, white 30%);
text-align: left;
margin-left: 20px;
}
.footer-text {
font-size: 12px;
margin-left: 40px;
margin-top: 7px;
}
.img-area1 {
background-image: url(Screenshot_2.png);
background-repeat: no-repeat;
background-size: 18%;
background-position-y: 8%;
background-position-x: 8%;
}
.img-area2 {
padding-left: 2%;
padding-top: 2%;
}
.img-area3 {
position: absolute;
right: 0;
}
.img-area3 img {
position: absolute;
left: 0;
height: 30px;
width: 30px;
transition: opacity 0.1s ease-in-out;
}
.img-area3 img.img-front:hover {
opacity: 0;
cursor: pointer;
}
.header-text {
margin-left: 110px;
font-size: 14px;
font-weight: 500;
}
.delete-book {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 90px;
font-size: 13px;
}
.delete-book-permanently {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 90px;
font-size: 9px;
padding-left: 20%;
color: grey;
}
p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-left: 6%;
font-size: 11px;
}
.autor {
color: #adadad;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 110px;
font-size: 11px;
line-height: 40px;
}
.header-text2 {
color: #545454;
position: absolute;
margin-left: 7px;
margin-top: 3px;
font-size: 13px;
}
.img-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-top: 5%;
}
.img-text p {
margin-right: 20px;
margin-left: 90px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 200;
}
.zvjezdica {
background-color: #b2eaf0;
}
.dropbtn {
background-color: #b2eaf0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #666666;
font-size: 20px;
border: none;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
left: auto !important;
right: 0 !important;
text-align: right;
display: none;
position: absolute;
background-color: #404040;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 8px 10px;
text-decoration: none;
display: block;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.dropbtn:hover {color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #404040; color: white;}
.dropdown-content a:hover {background-color: #4a4a4a;}<!DOCTYPE html>
<html>
<head>
<title>List Grid View Demo</title>
<link rel="stylesheet" href="list-grid.css"/>
<script src="list-grid.js"></script>
</head>
<body>
<span class="books">Books
<div class="img-area3">
<img src="list.png" alt="" class="img-back">
<img src="grid.png" alt="" class="img-front">
</div>
</span>
<div class="box-area">
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>The Wizard of Oz</strong></span>
<p>Dorothy found herself riding easily between two of the biggest Monkeys, one of them the King himself. They had made a chair of their hands and were careful not to hurt her. "Why do you have to obey the charm of the Golden Cap?"</p>
<span class="autor">L. Frank Baum</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>Mobi Dick</strong></span>
<p>Roound the world! There is much in that sound to inspire proud feelings; but where to does all that circum navigation conduct? Only through number less perils to the very point when we started, where those that we left behind secure, were all the time before us.</p>
<span class="autor">Herman Melville</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>The War of the Worlds</strong></span>
<p>"What news from the common?" I said. "People seem fair silly about the common," sad the woman over the gate.</p>
<span class="autor">L. Frank Baum</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>At the Earth's Core</strong></span>
<p>I wonderewd why these agile creatures required connecting bridges between the trees, but later when I saw the motley aggregation of half-savage beasts which they kept within their village I realized the necessity for the pathways.</p>
<span class="autor">Edgar Rice Burroughs</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-area">
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>A princess of Mars</strong></span>
<p>I drew rein on a little level promontory overlooking the trail below and to my left, and saw the party of pursuing savages disappearing around the point of a neighboring peak.</p>
<span class="autor">Edgar Rice Burroughs</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>Alice in Wonderland</strong></span>
<p>The Hatter shook his head mournfully.'Not I!' he replied. 'We quarrelled last March - just before HE want mad, you know -'</p>
<span class="autor">Lewis Carrol</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>The Scarlet Plague</strong></span>
<p>It was at this point that Harelip rose to gis feet, an expression of huge contempt on his face. "Granser," he announced, "you make me sick with your gabble.</p>
<span class="autor">Jack London</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
<div class="single-box">
<div class="img-area1">
<div class="img-text">
<span class="header-text"><strong>Around the World in 80 days</strong></span>
<p>Nothing could be more simple. Indeed, it was all so simple that Fix and Passepartout felt their hearts beating as if they would crack. They were listening for the whistle agreed upon, when suddenly savage cries resounded in the air, accompanied by reports which certainly did not issue from the car where the duelists were.</p>
<span class="autor">Jules Verne</span>
<div class="zvjezdica">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
<div class="img-area2">
<img src="baseline_star_black_24dp.png" width="23px" height="23px" style="filter: invert(32%) sepia(0%) saturate(2306%) hue-rotate(330deg) brightness(94%) contrast(89%);">
<span class="header-text2">16</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
Flexbox 是您的朋友，考虑一下您希望其他所有内容的大小，其余的都会到位。例如，如果您希望页脚位于底部，则说明应扩展以填充空白空间，将其推到底部。
由于旧标签和拼写错误，我不得不重写大部分代码。
.book{
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 320px;
height: 280px;
background-color: #d1f6f1;
display: flex;
flex-direction: column;
margin: 20px auto;
box-shadow: 0px 0px 3px 0.1px #888888;
}
.content{
margin-left: 15%;
padding: 10px;
background-color: white;
flex-grow: 2;
display: flex;
flex-direction: column;
padding: 15px;
}
.title{
font-weight: bold;
}
.description{
flex-grow: 2;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 200;
margin: 10px 0;
}
.author{
color: #adadad;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 11px;
}
.footer{
background-color: #b2eaf0;
}
.dropbtn {
background-color: #b2eaf0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #666666;
font-size: 20px;
border: none;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
left: auto !important;
right: 0 !important;
text-align: right;
display: none;
position: absolute;
background-color: #404040;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 8px 10px;
text-decoration: none;
display: block;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.dropbtn:hover {color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #404040; color: white;}
.dropdown-content a:hover {background-color: #4a4a4a;}<div class="book">
<div class="content">
<div class="color"></div>
<div class="title">The Wizard of Oz</div>
<div class="description">Dorothy found herself riding easily between two of the biggest Monkeys, one of them the King himself. They had made a chair of their hands and were careful not to hurt her. "Why do you have to obey the charm of the Golden Cap?"
</div>
<div class="author">L. Frank Baum</div>
</div>
<div class="footer">
<div class="dropdown">
<button class="dropbtn">•••</button>
<div class="dropdown-content">
<a href="#">Edit book details</a>
<a href="#">Duplicate book</a>
<a href="#">Move book</a>
<a href="#">
<div style="display: inline;">
<span class="delete-book">Delete book</span>
<span class="delete-book-permanently">Delete this book permanently</span></div>
</div>
</a>
</div>
</div>
</div>推荐阅读
- python - MaxRetryError 硒
- maven - 即使我所有的测试都通过了，我也看到了surefire错误的错误，没有与surefire插件相关的答案对我有帮助
- javascript - 地理定位后使用javascript生成随机纬度和经度
- arrays - 谷歌表格 - 基于相应单元格范围内的数值连接单元格范围内文本的公式
- python - 如何在 Tkinter 中设置最大值？
- c++ - 为什么在包含 boost 标头 (g++) 时出现“没有这样的文件或目录”错误
- mongodb - Mongo go驱动程序-在连接启用ssl和加密密钥时出现密钥不匹配错误
- javascript - Javascript - 获取两个数组之间的对应对象
- javascript - 尝试使用 Vue.js 访问 Stack Oveflow Api 出现错误
- android - 如何修复无法读取序列化文件指纹。在数据流中发现无法识别的值