0
好吧，所以嘗試與表格單元格和垂直對齊：底部 也嘗試使用位置：相對於父母和位置：絕對按鈕（這，有點工作，我說有點因爲有些按鈕在盒子外面）。使按鈕粘到div的底部，仍然居中
這裏的的jsfiddle：https://jsfiddle.net/6abcr5f0/
HTML代碼：
<!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>
歡迎來到Stack Overflow！請在問題中提供[mcve]中的所有相關代碼，而不要在第三方網站上提供。 –
這是你正在做的事情：http://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox – Rikin
你可以在這裏再次使用flex https://jsfiddle.net/6abcr5f0/2 /或絕對位置https：// jsfiddle。net/6abcr5f0/1/ –