0

我正在尝试根据列表中包含的标签数量动态地为子 A 标签提供均匀的宽度。（例如，如果 4 个 A 的宽度均为 25%，则 3 个标签的宽度为 33%）。

我尝试计算 div 内的孩子数并将 100 除以 var 数但没有成功

jQuery

 var numChildren = $("div a").size()
    $('a').css({ width : 100/numChildren });

CSS

a { width: /*DYNAMIC*/ (all even) }

div {width: 100%; }

HTML

<div>
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>
4

7 回答 7

1

你可以只用 CSS 来做，而不用计算元素的数量：

HTML：

<div class="wrapper">
    <a></a>
    <a></a>
    <a></a>
</div>

CSS：

.wrapper {
    display: table;
    width: 100%;
    height: 50px;
    margin: 10px 0;
}
.wrapper > a {
    display: table-cell;
    border: 1px solid #000;
}

演示

于 2013-10-17T19:07:40.783 回答
0

使用您当前的代码，如果有四个元素，您正在设置：

width: 25;

我想你想要这个：

$('a').css({ width : 100/numChildren + '%' });
于 2013-10-17T18:55:13.173 回答
0

您可以使用此代码：

jsFiddle here

HTML

<div id="content">
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>

CSS

#content{
    width:100px;
    height:20px;
    background:#888;
}

a{
    height:20px;
    background:red;
    display:block;
    float:left;
}

jQuery

$(document).ready(function(){
    var numberChild = $("#content a").length;
    $("#content a").css("width",(100/numberChild)+"%");
});
于 2013-10-17T18:57:00.903 回答
0

尝试将 jquery 更改为：

 var numChildren = $("div a").length;
    $('a').css({ 'width', 100/numChildren + '%' });
于 2013-10-17T18:57:27.257 回答
0

Oriol 的答案是正确的，如果您不需要支持IE7 及以下版本。

如果您需要对这些浏览器的支持，您可以像其他人已经解释的那样计算相对宽度。

但是如果你知道你永远不会有超过n 个孩子，你也可以这样做：

// assuming that will never have more than 4 children
$('div:has(a)').addClass('one');
$('div:has(a+a)').addClass('two');
$('div:has(a+a+a)').addClass('three');
$('div:has(a+a+a+a)').addClass('four');

和CSS

div a       { width: 100%; }
div.two a   { width: 50%; }
div.three a { width: 33.3%; }
div.four a  { width: 25%; }

演示

于 2013-10-17T20:46:06.210 回答
0

HTML

<div>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
</div>

JAVASCRIPT

var numChildren = $("div a").length;
$('a').css({ width : 100/numChildren+'%' });
alert(100/numChildren);

CSS

div
{
    width:300px;
}
a
{
    position:relative;
    float:left;
    background-color:#EEE;
}

JSFIDDLE 链接

于 2013-10-17T18:57:39.720 回答
0

我认为您不需要设置width百分比。因为您最终将使用 javascript 来均匀分布width

HTML：

<div>
 <a>One</a>
 <a>Two</a>
 <a>Three</a>
 <a>Four</a>
</div>

Javascript：

var parent =  $("div");
var anchors = parent.find('a');
anchors.css({ width : parent.width() / anchors.length });

CSS：

div > a {
    background: red;
    display: inline-block;
}

演示

于 2013-10-17T19:00:25.170 回答