我正在研究一些在智能手机上以纵向观看底部页脚的代码。它是一列，其中3个图像居中，第二列位于其下，两个图像居中。我已经在这里待了两天以上，而css正在杀死我。
第一栏似乎很好。这是问题的第二个问题。这是我的html和当前的css。
<body>
<footer>
<div class="section-group">
<div class="col1">
<div class="col span_1_of_3">
<font point-size="16" color="#FFFFFF"><div align="center"><font face="Arial">Text Here</font></div>
<div align="center" class="img"><a href="#" target="_blank"><img src="http://netmonkeys.net/uploads/image2.jpg" alt="" width="85" height="52" /></a></div>
</div>
<div class="col span_2_of_3">
<font point-size="16" color="#FFFFFF"><div align="center"><font face="Arial">Text Here</font></div>
<div align="center" class="img"><a href="#" target="_blank"><img src="http://netmonkeys.net/uploads/image3.jpg" alt="" width="85" height="52" /></a></div>
</div>
<div class="col span_3_of_3">
<font point-size="16" color="#FFFFFF"><div align="center"><font face="Arial">Text Here</font></div>
<div align="center" class="img"><a href="#" target="_blank"><img src="http://netmonkeys.net/uploads/image4.jpg" alt="" width="85" height="52" /></a></div>
</div>
</div>
<div class="section-group">
<div class="col2">
<div class="col span_1_of_2">
<div align="center" class="img"><a href="#" target="_blank"><img src="http://netmonkeys.net/uploads/image1.jpg" alt="" width="109" height="60" /></a></div>
</div>
<div class="col span_2_of_2">
<div align="center" class="img"><a href="#" target="_blank"><img src="http://netmonkeys.net/uploads/image5.jpg" alt="" width="109" height="60" /></a></div>
</div>
</div>
</div>
</footer>
</body>
</html>
/* GRID OF THREE ==============*/
/* SECTIONS */
.section-group {
clear: both;
padding: 0px;
margin: 0px 0px;
border-color: #fff;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_3_of_3 {
width: 20%;
white-space: nowrap;
}
.span_2_of_3 {
width: 20.13%;
}
.span_1_of_3 {
width: 26.26%;
}
.section-group {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col:first-child { margin-left: 0; }
.col2 {
display: block;
float:left;
margin: 2px 0 -3px 1%;
}
.span_3_of_3 {
width: 30%;
}
.span_2_of_3 {
width: 30%;
}
.span_1_of_3 {
width: 30%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 {
width: 100%;
background: #000000;
}
/* Portrait */
@media only screen {
.span_2_of_2, .span_1_of_2 {
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
background: #000000;
}
}
.span_2_of_2 {
width: 10.69%;
margin-top: -2px;
background: #000000;
}
.span_1_of_2 {
width: 70.2%;
margin-top: -2px;
background: #000000;
border-right: 1px solid #fff;
}
.span_3_of_3 {
width: 33.70%;
margin-top: -2px;
white-space: nowrap;
border-bottom: 1px solid #fff;
}
.span_2_of_3 {
width: 32.94%;
margin-top: -2px;
white-space: nowrap;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.span_1_of_3 {
width: 32.88%;
margin-top: -2px;
white-space: nowrap;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
body {
border: solid;
border-width: 1px;
border-color: #fff;
padding: 0px;
margin: 2px;
font-size: 90%;
background: #000000;
position: relative;
z-index: 100;
bottom: -2px;
left: 0;
height: 147px;
color: #ffffff;
}
footer {
position: absolute;
left: 0px;
bottom: -2px;
height: 147px;
width: 100%;
}
现在看起来像这样： http://netmonkeys.net/2-3-column-smartphone-layout.jpg
但这是它需要的样子： http://netmonkeys.net/2-3-column-smartphone-desired.jpg
我似乎无法钉第二列css。有人可以帮忙吗？
