【发布时间】：2016-05-29 22:14:00
【问题描述】：
我知道我可能没有正确解释这一点，但我正在尝试创建一个 HTML 模板，该模板将电视节目列为封面插图。在一定程度上，每个元素都是灵活的。通过在更大的屏幕上展开，它将每行显示多达五个节目，而在 iPhone 或 Android 设备等较小的屏幕上至少显示两个节目。十年来我还没有真正用 CSS 或 HTML 做任何事情，所以我已经生锈了。
我已经完成了 90% 的路......我唯一真正不喜欢的是，在小于最大值的行上，它使它们居中。我想让集合居中，但元素左对齐，以便模仿表格的工作方式。
有什么建议吗？我在堆栈溢出方面尝试了很多东西，但似乎没有什么能让我到达我想要去的地方。如果不使用 DIV，我绝对愿意放弃它并重新开始。
这是 HTML 和 CSS 的示例：
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background: #EEE;
font-family: "Roboto", helvetica, arial, sans-serif;
font-weight: 100;
text-rendering: optimizeLegibility;
text-align: center;
margin: 0;
padding: 0;
}
.page-header {
position: fixed;
display: table;
background-color: #1b1e24;
top: 0;
left: 0;
right: 0;
height: 5em;
width: 100%;
z-index: 100;
color: #D5DDE5;
}
.header-content {
display: table-cell;
width: 100%;
vertical-align: middle;
font-size: 1.5em;
font-weight: 100;
}
.shows-container {
display: inline-block;
min-width: 414px;
text-align: center;
margin-top: 7em;
}
.show-container {
min-width: 189px;
display: inline-block;
vertical-align: top;
margin: 1%;
width: 16%;
}
.show-artwork {
padding-top: 139.15%;
position: relative;
width: 100%;
display: block;
}
.show-image {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
.show-name {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
background-color: #FFF;
text-align: left;
font-size: .7em;
font-weight: normal;
padding-left: .5em;
padding-top: 2.5em;
padding-bottom: 6%;
}
.show-airing {
display: inline-block;
width: 100%;
position: absolute;
bottom: -.7em;
margin: 0;
padding: 0;
left: 0;
font-size: .7em;
}
.show-day-count, .show-day-text {
display: inline-block;
padding: .3em;
font-weight: normal;
}
.day-today {
background-color: #F00;
color: #FFF;
}
.day-nottoday {
background-color: #4E5066;
color: #FFF;
padding-left: 1em;
padding-right: 1em;
}
.day-today, .day-nottoday {
border-bottom-left-radius: .3em;
border-top-left-radius: .3em;
}
.show-day-text {
background-color: #DDD;
border-bottom-right-radius: .3em;
border-top-right-radius: .3em;
}
</style>
</head>
<body>
<div class="page-header">
<div class="header-content">Tracking Shows</div>
</div>
<div class="shows-container">
<div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/53/132622.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-today">TODAY</div><div class="show-day-text">10:00 PM</div></div>
</div>
<div class="show-name">GAME OF THRONES</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/53/132726.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-today">TODAY</div><div class="show-day-text">10:30 PM</div></div>
</div>
<div class="show-name">SILICON VALLEY</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/1/3570.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-nottoday">1</div><div class="show-day-text">DAYS</div></div>
</div>
<div class="show-name">AMERICAN DAD!</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/47/118626.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-nottoday">3</div><div class="show-day-text">DAYS</div></div>
</div>
<div class="show-name">THE AMERICANS</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/0/480.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-nottoday">4</div><div class="show-day-text">DAYS</div></div>
</div>
<div class="show-name">BONES</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/2/5102.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-nottoday">4</div><div class="show-day-text">DAYS</div></div>
</div>
<div class="show-name">ARCHER</div>
</div><div class="show-container">
<div class="show-artwork">
<img src="http://tvmazecdn.com/uploads/images/original_untouched/22/56919.jpg" class="show-image" />
<div class="show-airing"><div class="show-day-count day-nottoday">14</div><div class="show-day-text">DAYS</div></div>
</div>
<div class="show-name">THE LAST SHIP</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css fluid-layout