我知道我可能没有正确解释这个问题，但我正在创建一个HTML模板，其中列出了电视节目作为封面图片。在某种程度上，每个元素都是灵活的。通过在更大的屏幕上扩展，它将显示每行多达五个节目，而在iPhone或Android设备等较小的屏幕上显示最少两个。我已经十年没有用CSS或HTML做过任何事了，所以我不仅仅是生锈了。
我有90％的路在那里......我唯一不喜欢的是，在最小值的行上，它将它们居中。我想让集合居中，但元素左对齐，以便模仿表格的工作方式。
有什么建议吗？我已经在堆栈溢出上尝试了很多东西，但似乎没有什么能让我到达我想去的地方。如果使用DIV不是要走的路，我肯定愿意废弃它并重新开始。
以下是HTML和CSS的示例：
public class MapFragment extends Fragment implements OnMapReadyCallback {
SupportMapFragment mSupportMapFragment;
private GoogleMap mMap;
int ZOOM_LEVEL=15;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View mTrackView = inflater.inflate(R.layout.fragment_map, container, false);
mSupportMapFragment = SupportMapFragment.newInstance();
FragmentTransaction fragmentTransaction = getChildFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.mapwhere, mSupportMapFragment);
fragmentTransaction.commit();
return mTrackView;
}
@Override
public void onMapReady(GoogleMap map) {
//googleMap = mMap;
setUpMapIfNeeded();
}
public void onStart() {
// TODO Auto-generated method stub
super.onStart();
if(mSupportMapFragment!=null){
googleMap = mSupportMapFragment.getMap();
if(googleMap!=null){
googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
googleMap.getUiSettings().setMyLocationButtonEnabled(false);
googleMap.setMyLocationEnabled(false);
CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(
new LatLng(12.12122,
17.22323), ZOOM_LEVEL);
googleMap.animateCamera(cameraUpdate);
}
}
}
}
答案 0 :(得分：0)
将你的“show-container”包裹在第二个div上，并将左对齐方式应用于它。
<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;
}
.shows-wrapper {
display: inline-block;
text-align: left;
}
.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="shows-wrapper">
<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>
</div>
</body>
</html>