如何使width属性在css中作为auto使用

Question

我正在尝试在 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>

小提琴如下：这个小提琴包含手动设置的宽度。我想让它自动设置。

http://jsfiddle.net/8q4tco9c/

我做错了什么？

请帮助!!

Answer 1

将此行放在$.each

之后

此处将25更改为您所需的一个月宽度

$('.bar-steps').css('width',parseInt(activityTotalMonth.length*25)+'px');

并从您的css中删除width: auto;

Answer 2

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;

}

试试这段代码......

Answer 3

试试这个： - http://jsfiddle.net/adiioo7/8q4tco9c/1/

<强> 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>