-1
我生成的項目列表相同的高度：http://rwdb.info/redesign/discography_overview.php?type=single使PHP產生的div響應
問題： 當我調整我的畫面，有些標題超過一行文本。這會導致我的佈局看起來很奇怪。
首選解決方案： 圖片，標題和副標題保持原樣。更多按鈕在div的底部對齊，div高度由該行中的最高項決定。這一切都必須有響應，所以固定的高度不會是一個解決方案。
PHP
<section id="disc-overview">
<?php
$sql = "SELECT id, title, date_released, produced_by, arranged_by, recorded_at, seo_link, taken_from FROM discography_overview WHERE artist = '1' AND type = '$type' ORDER BY date_released DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$id = $row["id"];
$title = $row["title"];
$date_released = $row["date_released"];
$date = DateTime::createFromFormat('Y-m-d', $date_released);
$date_released = $date->format('F jS, Y');
$produced_by = $row["produced_by"];
$arranged_by = $row["arranged_by"];
$recorded_at = $row["recorded_at"];
$seo_link = $row["seo_link"];
$taken_from = $row["taken_from"];
echo "
<div class=\"col-sm-3 disc-overview row-eq-height\">
<div class=\"col-sm-12 text-center wow fadeInLeft\">
<img alt=\"$title\" src=\"/images/discography/$seo_link-1.jpg\">
</div>
<h3 class=\"card-title\">$title</h3>
<h4 class=\"card-subtitle\">$date_released</h4>
<a href=\"/$type/$seo_link/\" title=\"Show details of $title\">
<button class=\"btn btn-card\">MORE</button>
</a>
</div>";
}
}?>
</section>
CSS：
#disc-overview {
padding-top: 50px;
background-color: #ffffff;
display: table;
width: 100%;
}
.disc-overview {
background-color: #ffffff;
text-align: center;
padding-bottom: 50px;
display: table-cell;
}
.disc-overview img {
width: 100%;
vertical-align: middle;
padding-bottom: 30px;
}
.card {
text-align: center;
border: 0;
background: none;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
position: absolute;
}
.card-title {
text-align: center;
color: #000000;
letter-spacing: -1px;
font-weight: 600;
font-size: 20px;
}
.card-subtitle {
margin-bottom: 0;
font-style: italic;
font-weight: 400;
font-size: 15px;
font-family: "Lora", serif;
color: #5b5b5b;
margin-top: -1rem;
line-height: 1.7857;
padding-bottom: 1rem;
text-align: center;
}
.btn-card {
background-color: #404040;
border-color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
horiz-align: center;
color: #ffffff;
}
.btn-card:hover {
background-color: #f5f5f5;
color: #404040;
border-color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Tamara de Paus">
<title>Everything about Robbie Williams | Robbie Williams Database</title>
<meta name="description" content="Robert Peter (Robbie) Williams (born February 13th, 1974) is an English singer and songwriter. Learn more at rwdb.info!"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/animate/animate.min.css">
<link rel="stylesheet" href="assets/rwdb-custom/rwdb-custom.css">
<script src="assets/wow/wow.min.js"></script>
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-93480532-1', 'auto');
ga('send', 'pageview');
</script>
<script src="js/wow.min.js"></script>
<script>new WOW().init(); </script>
<section id="menu">
<nav id="nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-logo"><img src="images/rwdb-logo.png" alt="RWDB"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">HOME</a></li>
<li class="dropdown">
<a href="/discography/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DISCOGRAPHY
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/albums/">Albums</a></li>
<li><a href="/singles/">Singles</a></li>
<li><a href="/dvd/">DVDs</a></li>
<li><a href="/compilations/">Compilations</a></li>
<li><a href="/appearances/">Appearances</a></li>
<li><a href="/bootlegs/">Bootlegs</a></li>
</ul>
</li>
<li><a href="/lyrics/">LYRICS</a></li>
<li><a href="/tour/">TOUR</a></li>
</ul>
</div>
</div>
</nav>
</section> <section class="header-block-album">
<div class="container--padding animated slideInUp">
<div class="col-xs-8 col-xs-offset-2">
<h1>ALBUMS</h1>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h2>Robbie Williams has released 13 albums, the most recent of which "Heavy Entertainment Show".</span></h2>
</div>
</div>
<div class="down-arrow">
<a href="#disc-overview"><span></span></a>
</div>
</section>
<div class="clear"></div>
<section id="disc-overview">
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Heavy Entertainment Show" src="/images/discography/the-heavy-entertainment-show-1.jpg">
</div>
<h3 class="card-title">Heavy Entertainment Show</h3>
<h4 class="card-subtitle">November 4th, 2016</h4>
<a href="/album/the-heavy-entertainment-show/" title="Show details of Heavy Entertainment Show">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Under the Radar Vol 1" src="/images/discography/under-the-radar-vol-1-1.jpg">
</div>
<h3 class="card-title">Under the Radar Vol 1</h3>
<h4 class="card-subtitle">December 1st, 2014</h4>
<a href="/album/under-the-radar-vol-1/" title="Show details of Under the Radar Vol 1">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Swings Both Ways" src="/images/discography/swings-both-ways-1.jpg">
</div>
<h3 class="card-title">Swings Both Ways</h3>
<h4 class="card-subtitle">November 18th, 2013</h4>
<a href="/album/swings-both-ways/" title="Show details of Swings Both Ways">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Take the Crown" src="/images/discography/take-the-crown-1.jpg">
</div>
<h3 class="card-title">Take the Crown</h3>
<h4 class="card-subtitle">November 2nd, 2012</h4>
<a href="/album/take-the-crown/" title="Show details of Take the Crown">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Reality Killed the Video Star" src="/images/discography/reality-killed-the-video-star-1.jpg">
</div>
<h3 class="card-title">Reality Killed the Video Star</h3>
<h4 class="card-subtitle">November 6th, 2009</h4>
<a href="/album/reality-killed-the-video-star/" title="Show details of Reality Killed the Video Star">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Rudebox" src="/images/discography/rudebox-1.jpg">
</div>
<h3 class="card-title">Rudebox</h3>
<h4 class="card-subtitle">October 23rd, 2006</h4>
<a href="/album/rudebox/" title="Show details of Rudebox">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Intensive Care" src="/images/discography/intensive-care-1.jpg">
</div>
<h3 class="card-title">Intensive Care</h3>
<h4 class="card-subtitle">October 24th, 2005</h4>
<a href="/album/intensive-care/" title="Show details of Intensive Care">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Live Summer 2003" src="/images/discography/live-summer-2003-1.jpg">
</div>
<h3 class="card-title">Live Summer 2003</h3>
<h4 class="card-subtitle">March 29th, 2003</h4>
<a href="/album/live-summer-2003/" title="Show details of Live Summer 2003">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Escapology" src="/images/discography/escapology-1.jpg">
</div>
<h3 class="card-title">Escapology</h3>
<h4 class="card-subtitle">November 18th, 2002</h4>
<a href="/album/escapology/" title="Show details of Escapology">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Swing When You're Winning" src="/images/discography/swing-when-youre-winning-1.jpg">
</div>
<h3 class="card-title">Swing When You're Winning</h3>
<h4 class="card-subtitle">November 19th, 2001</h4>
<a href="/album/swing-when-youre-winning/" title="Show details of Swing When You're Winning">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Sing When You're Winning" src="/images/discography/sing-when-youre-winning-1.jpg">
</div>
<h3 class="card-title">Sing When You're Winning</h3>
<h4 class="card-subtitle">August 28th, 2000</h4>
<a href="/album/sing-when-youre-winning/" title="Show details of Sing When You're Winning">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="I've Been Expecting You" src="/images/discography/ive-been-expecting-you-1.jpg">
</div>
<h3 class="card-title">I've Been Expecting You</h3>
<h4 class="card-subtitle">October 26th, 1998</h4>
<a href="/album/ive-been-expecting-you/" title="Show details of I've Been Expecting You">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Life Thru a Lens" src="/images/discography/life-thru-a-lens-1.jpg">
</div>
<h3 class="card-title">Life Thru a Lens</h3>
<h4 class="card-subtitle">September 29th, 1997</h4>
<a href="/album/life-thru-a-lens/" title="Show details of Life Thru a Lens">
<button class="btn btn-card">MORE</button>
</a>
</div> </section>
<div class="clear"></div>
<footer class="footer">
<div class="container">
<p>© Robbie Williams Database 2017. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="assets/rwdb-custom/rwdb-custom.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
而不是給你的PHP，你能提供它輸出的HTML嗎？ –
我收到了一條錯誤消息，說明它太大而無法粘貼消息。這會有幫助嗎？ [鏈接]（查看源代碼：http：//rwdb.info/redesign/discography_overview.php？type = single） – tampie
編輯：我將它添加到原始文章@KevinJantzer – tampie