gpt4 book ai didi

javascript - 用于生成意外结果的 jQuery 页面的 CSS

转载 作者:行者123 更新时间:2023-11-28 18:54:33 25 4
gpt4 key购买 nike

我有这段 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com