获取元素以使用可用的最大宽度，具体取决于元素的实例数量

发布于 2024-10-18 00:42:20 字数 338 浏览 3 评论 0原文

假设我有未知数量的元素，并且我想像这样扩展它们：

1 element:
[========]

2 elements:
[===][===]

3 elements:
[===][===]
[========]

4 elements:
[===][===]
[===][===]

依此类推，[===] 是元素。

更奇怪的是，该页面只能在 webkit 中查看，因此 -webkit 元素是完全允许的，即使它们没有 -moz 等效项。

有没有一种仅 CSS 的方法可以解决这个问题？如果没有，有没有一种 JS 最小的方法来解决这个问题？

原文

Say I have an unknown amount of elements, and I wanted to expand them like so:

1 element:
[========]

2 elements:
[===][===]

3 elements:
[===][===]
[========]

4 elements:
[===][===]
[===][===]

and so on, the [===]s being elements.

To add to the oddness of this question, the page will only ever be viewed within webkit, so -webkit elements are completely allowed even if they don't have -moz equivalents.

Is there a CSS only way of solving this problem? If not, is there a JS-minimal way of solving this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倒数 2024-10-25 00:42:20

假设标记是这样的：

<div class="container">
    <div>1</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

这将产生您想要的布局：

.container div {
    float: left;
    width: 50%;
}
.container div:last-child:nth-child(2n+1) {
    width: 100%;
}

基本上它说使宽度为 50%，但当最后一个子项的编号为奇数时，使其为 100%。这是一个完整的示例。

Assuming markup something like this:

<div class="container">
    <div>1</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

This will produce the layout you want:

.container div {
    float: left;
    width: 50%;
}
.container div:last-child:nth-child(2n+1) {
    width: 100%;
}

Basically it says make the width 50%, but when there's an odd numbered last child make it 100%. Here's a complete example.

回复收藏 0 原文

尬尬 2024-10-25 00:42:20

您可以使用 JQuery 轻松完成此操作。类似于：

$(".container").each(
    function(index,item) {
        if (index>0) {
            var prev = $(item).prev();
            if (prev.width() >= $(item).width()) {
                var width = $(prev).width()/2
                $(prev).width(width);
                $(item).width(width);
            }
        }
    }
);

其中“container”是该元素的类名。

You can do it easly with JQuery. Something like:

$(".container").each(
    function(index,item) {
        if (index>0) {
            var prev = $(item).prev();
            if (prev.width() >= $(item).width()) {
                var width = $(prev).width()/2
                $(prev).width(width);
                $(item).width(width);
            }
        }
    }
);

Where "container" is the class name of this elements.

回复收藏 0 原文

~没有更多了~