我有这段 javascript 代码可以将 3 个 div 图标填充到偶数行中。为什么我的前两行按预期排列，而第三行以 .col-5 开始排列？
function row_content(row_number) {
var output = "";
switch (row_number) {
case 1:
icon_row = Array("Arrive", "Park", "Greet", "Sleep", "Wash", "Dress", "Shade");
break;
case 2:
icon_row = Array("Watch", "Cook", "Dine", "Chat", "Chill", "Grill", "View");
break;
case 3:
icon_row = Array("Dream", "Blog", "Splash", "Clean", "Play", "Work", "Design");
break;
default:
return;
}
$j.each(icon_row, function(key, value) {
icon = icon_content(key, value);
output = output + icon;
});
return output;
}
function icon_content(col, name) {
var opener = "<div id='" + name + "' class='icon col-" + col + "'><a href='#'>";
var image = "<img src='img/icons/" + name + ".png' //>";
var verb = "<div id='" + name + "-text' class='icon-verb'>" + name + "</div>";
var closer = "</a></div>";
var output = opener + image + verb + closer;
return output;
}
function fill_rows() {
$j('#icon-row-1').append(row_content(1));
$j('#icon-row-2').append(row_content(2));
$j('#icon-row-3').append(row_content(3));
}
我正在使用 normalize.css，与之配套的 CSS 是:
/* Icons */
.icon {
float: left;
padding: 12px;
text-align: center;
width: 114px;
}
.icon a {
color: #fff;
font-size: 23px;
text-decoration: none;
}
/* Icon Rows */
.icon-row {
position: relative;
margin: auto;
height: 165px;
width: 966px;
}
跟进:这是与之配套的 HTML。
<body>
<div id="wrapper">
<div id="header">
<div id="nav"></div>
</div>
<div id="content">
<div id="icons-wrapper">
<div id="icon-row-1" class="icon-row"></div>
<div id="icon-row-2" class="icon-row"></div>
<div id="icon-row-3" class="icon-row"></div>
</div>
</div>
</div>
</body>
最佳答案
我怀疑原因是您的一个图标图像比其他图标图像略高，迫使下方行上的 float 偏移。检查第二行图标的高度.col4
------------------
| | | | |
------------------
| | | | |
-----___----------
| | | | |
------------------
关于javascript - 用于生成意外结果的 jQuery 页面的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8342959/