【发布时间】：2017-03-01 06:31:13
【问题描述】：
好的，所以尝试使用表格单元格和垂直对齐：底部 还尝试使用 position: relative on parent 和 position: absolute on button（这有点工作，我说有点因为有些按钮是开箱即用的）。
这是 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！请在问题本身的minimal reproducible example 中提供所有相关代码，而不是在第三方网站上。
-
这就是您要执行的操作：stackoverflow.com/questions/31000885/…
-
你可以在这里再次使用 flex jsfiddle.net/6abcr5f0/2 或绝对位置 jsfiddle.net/6abcr5f0/1