好吧，尝试使用table-cell和vertical-align：bottom 还尝试使用position：relative在父级和位置：绝对按钮（有点工作，我说有点因为有些按钮不在框中）。
这是JsFiddle：https://jsfiddle.net/6abcr5f0/
HTML code：
<!DOCTYPE html>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
<ul id="ul">
<a href="index.html"><img src="images/logo.png"></a>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Support</a></li>
</ul>
<div id="ad">
<center>
<h3 class="blackh1">iPhone</h3>
<h2 class="blackh1">This is 7.</h2>
<img src="images/iphone.jpg" class="iphoneimg">
</center>
</div>
<div id="product-container">
<div class="cont"><div class="product">
<h1 class="h1">iPhone</h1><br>
<img src="images/iPhone7.png" class="contentimg">
<p class="ptext">
This is 7.
iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
<button class="buy">Buy from 649$</button>
</div>
<div class="product">
<h1 class="h1">iPad</h1><br>
<img src="images/IPad.png" class="contentimg2">
<p class="ptext">iPad Pro is more than the next generation of iPad — it’s an uncompromising vision of personal computing for the modern world. It puts incredible power that leaps past most portable PCs at your fingertips. It makes even complex work as natural as touching, swiping, or writing with a pencil. And whether you choose the 12.9-inch model or the new 9.7-inch model, iPad Pro is more capable, versatile, and portable than anything that’s come before. In a word, super.</p>
<button class="buy">Buy from 599$</button>
</div>
</div>
<div class="cont"><div class="product">
<h1 class="h1">iPod</h1><br>
<img src="images/iPod.jpg" class="contentimg3">
<p class="ptext">iPod touch is the perfect way to carry your music collection in your pocket. With the iTunes Store — the world’s largest music catalog — you can load up your iPod touch with your favorite songs. And thanks to iCloud, everything you purchase through the iTunes Store is automatically available on all your devices for free. To enhance your music experience even more, Apple Music is available on your iPod touch, right in the Music app.</p>
<button class="buy">Buy from 399$</button>
</div>
<div class="product">
<img src="images/watchlogo.png" class="watchlogo">
<img src="images/watch.jpg" class="contentimg4">
<p class="ptext">Built-in GPS. Water resistance to 50 meters.1 A new lightning-fast dual-core processor. And a display that’s two times brighter than before. Full of features that help you stay active, motivated, and connected, Apple Watch Series 2 is designed for all the ways you move.</p>
<button class="buy">Buy from 269$</button>
</div>
</div>
</div>
<div id="product-container2">
<h1 class="h1">iMac</h1>
<h3>Retina. In colossal and ginormous.</h3>
<img src="images/imac.png" class="imacimg">
<p class="ptext">The idea behind iMac has never wavered: to craft the ultimate desktop experience. The best display, paired with high-performance processors, graphics, and storage — all within an incredibly thin, seamless enclosure. And that commitment continues with the all-new 21.5‑inch iMac with Retina 4K display. Like the revolutionary 27‑inch 5K model, it delivers such spectacular image quality that everything else around you seems to disappear. Adding up to the most immersive iMac experience yet — and another big, beautiful step forward.
</p><br>
<button class="button1">Check MacBook Pro</button>
<button class="buy">Buy from 269$</button>
<button class="button1">Check MacBook Air</button>
</div>
<div>
<div class="footer">
<p class="ftext">Copyright © 2017 Apple Inc. All rights reserved.</p>
<ul id="footul">
<li class="footli"><a href="index.html" class="flink">Privacy Policy</a></li>
<li class="footli"><a href="index.html" class="flink">Terms of Use</a></li>
<li class="footli"><a href="index.html" class="flink">Sales and Refunds</a></li>
<li class="footli"><a href="index.html" class="flink">Legal</a></li>
<li class="footli"><a href="index.html" class="flink">Site Map</a></li>
</ul>
</div>
</div>
答案 0 :(得分：2)
你可以用这个CSS做到这一点。绝对将.buy按钮放在底部，然后使用transform: translateX(-50%); left: 50%将它们水平居中。然后向父级添加一些padding-bottom以在按钮的底部创建空间。
.product {
position: relative;
padding-bottom: 50px;
}
.product .buy {
position: absolute;
margin: 0;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
html,body {
background-color: #E9E9E9;
padding:0;
margin:0;
}
/* Nav bar */
#ul {
list-style-type: none;
background-color: rgba(10,10,10,0.85);
position: fixed;
width: 100%;
display: flex;
justify-content: center;
}
#ul img {
margin-top: 15px;
margin-left: 10px;
margin-right:30px;
float: left;
height: 23px;
}
#ul li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
#ul li a:hover {
color:#969696;
text-decoration:none;
transition:.5s;
}
/* Advertisement */
#ad {
padding: 50px 20px;
background-color: rgb(10,10,10);
height: auto;
}
.blackh1 {
font-family: 'Dosis', sans-serif;
color: white;
}
/* Products */
#product-container {
background-color: white;
margin: 0px;
padding: 0px;
display:flex;
}
.cont {
display:flex;
}
.product {
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 18px;
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
background-color: white;
border-style: solid;
border-color: #0A97DD;
border-radius: 20px;
border-width: 1px;
width: 50%;
text-align: center;
}
.h1 {
font-family: 'Dosis', sans-serif;
color: #000;
text-align: center;
}
.iphoneimg {
width: 45%;
}
.contentimg {
width: 65%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
.contentimg2 {
width: 58%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
.contentimg3 {
width: 87%;
display: block;
margin: 0 auto;
margin-bottom: 21px;
}
.contentimg4 {
width: 48%;
display: block;
margin: 0 auto;
margin-bottom: 22px;
}
.buy {
background-color: rgb(61,157,233);
border-radius: 8px;
border-style: solid;
border-width: 1px;
border-color: rgb(0,119,214);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
background: -moz-linear-gradient(center top, #40A0EB, #0271CA);
margin-top: 15px;
outline:0;
color: #FCFCFC;
margin-left: 35px;
margin-right: 35px;
}
.buy:hover {
border-color: rgb(20,130,208);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
background: -moz-linear-gradient(center top, #4FA7ED, #157CCE);
outline:0;
}
.buy:active {
border-color: rgb(0,109,188);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
background: -moz-linear-gradient(center top, #3C93D8, #0269BA);
outline:0;
}
.watchlogo {
margin-top: 22px;
margin-bottom: 15px;
}
#product-container2 {
background-color: #E9E9E9;
padding-top: 13px;
padding-bottom: 40px;
padding-left: 250px;
padding-right: 250px;
text-align:center;
}
.imacimg {
width: 50%;
display: block;
margin: 0 auto;
margin-top:40px;
margin-bottom: 40px;
}
.button1 {
outline: 0;
border-radius: 8px;
margin-left: 50px;
margin-right: 50px;
background-color: white;
border-style: none;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 5px;
}
.button1:hover {
background-color: #F5F5F5;
}
.button1:active {
background-color: #F0F0F0;
}
/* Footer */
.footer {
margin: 0px 200px;
border-top-style: solid;
border-width: 1px;
border-color: #CECECE;
padding-top: 15px;
text-align: center;
}
.ftext {
font-size: 11px;
color: #989898;
}
.flink {
font-size: 11px;
color: #989898;
}
#footul {
list-style-type: none;
display: flex;
justify-content: center;
}
.footli {
margin-left: 15px;
margin-right: 15px;
}
/* For tablets/phones screens */
@media (max-width: 668px) {
.iphoneimg {
width: 100%;
}
.contentimg{
width:100%;
margin-bottom: 20px;
}
.contentimg2 {
width: 89%;
margin-bottom: 23px;
}
.contentimg3 {
width: 100%;
margin-bottom: 20px;
}
.contentimg4 {
width: 55%;
margin-bottom: 20px;
}
.ptext {
font-size: 11px;
}
.imacimg {
width: 65%;
}
#product-container2 {
padding-left: 20px;
padding-right: 20px;
}
.button1 {
display: block;
}
.footer {
margin: 0px 15px;
}
#ftext {
font-size: 9px;
}
}
/* For medium or less big screens */
@media (max-width: 1070px) {
#product-container {
display: block;
}
.product {
width: 50%;
}
}
.product {
position: relative;
padding-bottom: 50px;
}
.product .buy {
position: absolute;
margin: 0;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul id="ul">
<a href="index.html"><img src="images/logo.png"></a>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Support</a></li>
</ul>
<div id="ad">
<center>
<h3 class="blackh1">iPhone</h3>
<h2 class="blackh1">This is 7.</h2>
<img src="images/iphone.jpg" class="iphoneimg">
</center>
</div>
<div id="product-container">
<div class="cont"><div class="product">
<h1 class="h1">iPhone</h1><br>
<img src="images/iPhone7.png" class="contentimg">
<p class="ptext">
This is 7.
iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
<button class="buy">Buy from 649$</button>
</div>
<div class="product">
<h1 class="h1">iPad</h1><br>
<img src="images/IPad.png" class="contentimg2">
<p class="ptext">iPad Pro is more than the next generation of iPad — it’s an uncompromising vision of personal computing for the modern world. It puts incredible power that leaps past most portable PCs at your fingertips. It makes even complex work as natural as touching, swiping, or writing with a pencil. And whether you choose the 12.9-inch model or the new 9.7-inch model, iPad Pro is more capable, versatile, and portable than anything that’s come before. In a word, super.</p>
<button class="buy">Buy from 599$</button>
</div>
</div>
<div class="cont"><div class="product">
<h1 class="h1">iPod</h1><br>
<img src="images/iPod.jpg" class="contentimg3">
<p class="ptext">iPod touch is the perfect way to carry your music collection in your pocket. With the iTunes Store — the world’s largest music catalog — you can load up your iPod touch with your favorite songs. And thanks to iCloud, everything you purchase through the iTunes Store is automatically available on all your devices for free. To enhance your music experience even more, Apple Music is available on your iPod touch, right in the Music app.</p>
<button class="buy">Buy from 399$</button>
</div>
<div class="product">
<img src="images/watchlogo.png" class="watchlogo">
<img src="images/watch.jpg" class="contentimg4">
<p class="ptext">Built-in GPS. Water resistance to 50 meters.1 A new lightning-fast dual-core processor. And a display that’s two times brighter than before. Full of features that help you stay active, motivated, and connected, Apple Watch Series 2 is designed for all the ways you move.</p>
<button class="buy">Buy from 269$</button>
</div>
</div>
</div>
<div id="product-container2">
<h1 class="h1">iMac</h1>
<h3>Retina. In colossal and ginormous.</h3>
<img src="images/imac.png" class="imacimg">
<p class="ptext">The idea behind iMac has never wavered: to craft the ultimate desktop experience. The best display, paired with high-performance processors, graphics, and storage — all within an incredibly thin, seamless enclosure. And that commitment continues with the all-new 21.5‑inch iMac with Retina 4K display. Like the revolutionary 27‑inch 5K model, it delivers such spectacular image quality that everything else around you seems to disappear. Adding up to the most immersive iMac experience yet — and another big, beautiful step forward.
</p><br>
<button class="button1">Check MacBook Pro</button>
<button class="buy">Buy from 269$</button>
<button class="button1">Check MacBook Air</button>
</div>
<div>
<div class="footer">
<p class="ftext">Copyright © 2017 Apple Inc. All rights reserved.</p>
<ul id="footul">
<li class="footli"><a href="index.html" class="flink">Privacy Policy</a></li>
<li class="footli"><a href="index.html" class="flink">Terms of Use</a></li>
<li class="footli"><a href="index.html" class="flink">Sales and Refunds</a></li>
<li class="footli"><a href="index.html" class="flink">Legal</a></li>
<li class="footli"><a href="index.html" class="flink">Site Map</a></li>
</ul>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
你也可以将flex提升到这个级别：
html,
body {
background-color: #E9E9E9;
padding: 0;
margin: 0;
}
/* Nav bar */
#ul {
list-style-type: none;
background-color: rgba(10, 10, 10, 0.85);
position: fixed;
width: 100%;
display: flex;
justify-content: center;
}
#ul img {
margin-top: 15px;
margin-left: 10px;
margin-right: 30px;
float: left;
height: 23px;
}
#ul li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
#ul li a:hover {
color: #969696;
text-decoration: none;
transition: .5s;
}
/* Advertisement */
#ad {
padding: 50px 20px;
background-color: rgb(10, 10, 10);
height: auto;
}
.blackh1 {
font-family: 'Dosis', sans-serif;
color: white;
}
/* Products */
#product-container {
background-color: white;
margin: 0px;
padding: 0px;
display: flex;
}
.cont {
display: flex;
}
.product {
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 18px;
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
background-color: white;
border-style: solid;
border-color: #0A97DD;
border-radius: 20px;
border-width: 1px;
width: 50%;
text-align: center;
/*update */
display: flex;
flex-flow: column;
align-items: center;
/* end update for .product*/
}
.h1 {
font-family: 'Dosis', sans-serif;
color: #000;
text-align: center;
}
.iphoneimg {
width: 45%;
}
.contentimg {
width: 65%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
.contentimg2 {
width: 58%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
.contentimg3 {
width: 87%;
display: block;
margin: 0 auto;
margin-bottom: 21px;
}
.contentimg4 {
width: 48%;
display: block;
margin: 0 auto;
margin-bottom: 22px;
}
/*update */
.ptext {
flex: 1;
}
.buy {
background-color: rgb(61, 157, 233);
border-radius: 8px;
border-style: solid;
border-width: 1px;
border-color: rgb(0, 119, 214);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
background: -moz-linear-gradient(center top, #40A0EB, #0271CA);
margin-top: 15px;
outline: 0;
color: #FCFCFC;
}
/* end */
.buy:hover {
border-color: rgb(20, 130, 208);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
background: -moz-linear-gradient(center top, #4FA7ED, #157CCE);
outline: 0;
}
.buy:active {
border-color: rgb(0, 109, 188);
background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
background: -moz-linear-gradient(center top, #3C93D8, #0269BA);
outline: 0;
}
.watchlogo {
margin-top: 22px;
margin-bottom: 15px;
}
#product-container2 {
background-color: #E9E9E9;
padding-top: 13px;
padding-bottom: 40px;
padding-left: 250px;
padding-right: 250px;
text-align: center;
}
.imacimg {
width: 50%;
display: block;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
}
.button1 {
outline: 0;
border-radius: 8px;
margin-left: 50px;
margin-right: 50px;
background-color: white;
border-style: none;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 5px;
}
.button1:hover {
background-color: #F5F5F5;
}
.button1:active {
background-color: #F0F0F0;
}
/* Footer */
.footer {
margin: 0px 200px;
border-top-style: solid;
border-width: 1px;
border-color: #CECECE;
padding-top: 15px;
text-align: center;
}
.ftext {
font-size: 11px;
color: #989898;
}
.flink {
font-size: 11px;
color: #989898;
}
#footul {
list-style-type: none;
display: flex;
justify-content: center;
}
.footli {
margin-left: 15px;
margin-right: 15px;
}
/* For tablets/phones screens */
@media (max-width: 668px) {
.iphoneimg {
width: 100%;
}
.contentimg {
width: 100%;
margin-bottom: 20px;
}
.contentimg2 {
width: 89%;
margin-bottom: 23px;
}
.contentimg3 {
width: 100%;
margin-bottom: 20px;
}
.contentimg4 {
width: 55%;
margin-bottom: 20px;
}
.ptext {
font-size: 11px;
}
.imacimg {
width: 65%;
}
#product-container2 {
padding-left: 20px;
padding-right: 20px;
}
.button1 {
display: block;
}
.footer {
margin: 0px 15px;
}
#ftext {
font-size: 9px;
}
}
/* For medium or less big screens */
@media (max-width: 1070px) {
#product-container {
display: block;
}
.product {
width: 50%;
}
}<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul id="ul">
<a href="index.html"><img src="images/logo.png"></a>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Support</a></li>
</ul>
<div id="ad">
<center>
<h3 class="blackh1">iPhone</h3>
<h2 class="blackh1">This is 7.</h2>
<img src="images/iphone.jpg" class="iphoneimg">
</center>
</div>
<div id="product-container">
<div class="cont">
<div class="product">
<h1 class="h1">iPhone</h1>
<br>
<img src="images/iPhone7.png" class="contentimg">
<p class="ptext">
This is 7. iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful
iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
<button class="buy">Buy from 649$</button>
</div>
<div class="product">
<h1 class="h1">iPad</h1>
<br>
<img src="images/IPad.png" class="contentimg2">
<p class="ptext">iPad Pro is more than the next generation of iPad — it’s an uncompromising vision of personal computing for the modern world. It puts incredible power that leaps past most portable PCs at your fingertips. It makes even complex work as natural
as touching, swiping, or writing with a pencil. And whether you choose the 12.9-inch model or the new 9.7-inch model, iPad Pro is more capable, versatile, and portable than anything that’s come before. In a word, super.</p>
<button class="buy">Buy from 599$</button>
</div>
</div>
<div class="cont">
<div class="product">
<h1 class="h1">iPod</h1>
<br>
<img src="images/iPod.jpg" class="contentimg3">
<p class="ptext">iPod touch is the perfect way to carry your music collection in your pocket. With the iTunes Store — the world’s largest music catalog — you can load up your iPod touch with your favorite songs. And thanks to iCloud, everything you purchase through
the iTunes Store is automatically available on all your devices for free. To enhance your music experience even more, Apple Music is available on your iPod touch, right in the Music app.</p>
<button class="buy">Buy from 399$</button>
</div>
<div class="product">
<img src="images/watchlogo.png" class="watchlogo">
<img src="images/watch.jpg" class="contentimg4">
<p class="ptext">Built-in GPS. Water resistance to 50 meters.1 A new lightning-fast dual-core processor. And a display that’s two times brighter than before. Full of features that help you stay active, motivated, and connected, Apple Watch Series 2 is designed
for all the ways you move.</p>
<button class="buy">Buy from 269$</button>
</div>
</div>
</div>
<div id="product-container2">
<h1 class="h1">iMac</h1>
<h3>Retina. In colossal and ginormous.</h3>
<img src="images/imac.png" class="imacimg">
<p class="ptext">The idea behind iMac has never wavered: to craft the ultimate desktop experience. The best display, paired with high-performance processors, graphics, and storage — all within an incredibly thin, seamless enclosure. And that commitment continues with
the all-new 21.5‑inch iMac with Retina 4K display. Like the revolutionary 27‑inch 5K model, it delivers such spectacular image quality that everything else around you seems to disappear. Adding up to the most immersive iMac experience yet — and
another big, beautiful step forward.
</p>
<br>
<button class="button1">Check MacBook Pro</button>
<button class="buy">Buy from 269$</button>
<button class="button1">Check MacBook Air</button>
</div>
<div>
<div class="footer">
<p class="ftext">Copyright © 2017 Apple Inc. All rights reserved.</p>
<ul id="footul">
<li class="footli"><a href="index.html" class="flink">Privacy Policy</a></li>
<li class="footli"><a href="index.html" class="flink">Terms of Use</a></li>
<li class="footli"><a href="index.html" class="flink">Sales and Refunds</a></li>
<li class="footli"><a href="index.html" class="flink">Legal</a></li>
<li class="footli"><a href="index.html" class="flink">Site Map</a></li>
</ul>
</div>
</div>
</body>
</html>
https://jsfiddle.net/6abcr5f0/2/
或位置relative / absolute https://jsfiddle.net/6abcr5f0/1/
父母relative +增加padding bottom
absolute中的孩子，coordonate + margin （此示例中没有transform添加信息/提示）