0
我知道我可能没有正确解释这一点，但我正在创建一个列出电视节目作为封面插图的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>
我试过了，它的排序工作。如果你在更大的屏幕上打开它，虽然你会注意到右侧实际上比左侧大得多。物品的主要区块实际上并不居中。 –
奇怪的是。我只是注意到它也发生在你的例子上。 “显示容器”正在占用额外的空间，但它并不明显，因为它的内容居中并且没有左对齐。可悲的是我无法弄清楚为什么。 –
是的。那是我注意到的问题。尽管它是一个内联div，但它似乎并不适合这些内容。它几乎看起来像是它的包装，它的创造空间。我使用了铬检查器，它不是填充或任何东西。它只是影响容器的宽度。我还没有模糊的如何做任何事情。 –