我正在尝试在 css 文件中将宽度设置为自动。但是,我不知道为什么自动财产没有应用于我的div。以下是代码:
CSHTML
<div class="bar-steps"></div>
的.js
var activityMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var activityTotalMonth = [];
for (var j = 0; j < activityMonth; j++) {
activityTotalMonth.push(j);
}
$.each(activityTotalMonth, function (i, v) {
var pos = i * 25 + "px";
var div = $('<div>').addClass('counts').css("left", pos);
$(curelement).find('.bar-steps').append(div);
});
的CSS
.bar-steps {
width: auto;
float: left;
background: #e2e2e2;
border-radius: 4px;
padding: 4px 0 5px 0;
}
.bar-steps .counts {
width: 3px;
height: 3px;
float: left;
background: #999;
border-radius: 50px;
position: absolute;
top: 3px;
}
.bar-steps .counts:last-child {
margin-right: 0px!important;
但是,如果我在div列中手动设置宽度,则可以正常工作。如下:
<div class="bar-steps" style="width:376px"></div>
小提琴如下:这个小提琴包含手动设置的宽度。我想让它自动设置。
我做错了什么?
请帮助!!
答案 0 :(得分:1)
将此行放在$.each
此处将25更改为您所需的一个月宽度
$('.bar-steps').css('width',parseInt(activityTotalMonth.length*25)+'px');
并从您的css中删除width: auto;
答案 1 :(得分:1)
div.bar-steps {
width: auto;
float: left;
background: #e2e2e2;
border-radius: 4px;
padding: 4px 0 5px 0;
}
div.bar-steps .counts {
width: 3px;
height: 3px;
float: left;
background: #999;
border-radius: 50px;
position:relative;
top:-7px;
}
div.bar-steps .counts:last-child {
margin-right: 0px!important;
}
试试这段代码......
答案 2 :(得分:0)
<强> JS: - 强>
var activityMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var activityTotalMonth = [];
for (var j = 0; j < activityMonth.length; j++) {
activityTotalMonth.push(j);
}
$.each(activityTotalMonth, function (i, v) {
var pos = 25 + "px";
var div = $('<div>').addClass('counts').css("margin-right", pos);
$('.bar-steps').append(div);
});
<强> CSS: - 强>
.bar-steps {
width: auto;
float: left;
background: #e2e2e2;
border-radius: 4px;
padding: 4px 0 5px 0;
}
.bar-steps .counts {
width: 3px;
height: 3px;
float: left;
background: #999;
border-radius: 50px;
position:relative;
top:-7px;
}
.bar-steps .counts:last-child {
margin-right: 0px!important;
}
<强> HTML: - 强>
<div class="bar-steps"></div>