Question

我想在父div中使用一些div，我希望它们能够浮动。我想要将所有父空间分配给它的子节点并在最后创建空间隙。

子的数量由父宽度决定，所以我不能使用百分比。

示例：

我想将子divs宽度设置为300，父宽度为1000 1000/300 = 3个div将适合，但我希望额外的100像素在儿童之间平均分配。现在，如果我将父宽度设置为1200，那么四个孩子应该适合父母。

我需要这样的东西

宽度：计算（100％/（100％/ 300））; - ＆GT;儿童宽度

但实际上如果第一次划分是浮点划分而第二次划分则有效是整数除法。但是在css calc中没有整数除法或mod运算符方法

任何意见......

Answer 1

如果你只想使用CSS，你可以用这种代码处理多种不同的情况（原创想法：http://andr3.net/blog/post/142） - 其中div代表你的孩子：

/* one item */
div:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* two items */
div:nth-child(1):nth-last-child(2),
div:nth-child(2):nth-last-child(1) {
    width: 50%;
}

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

或使用flexbox：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

这是一个纯粹的CSS解决方案：

我们可以使用一系列媒体查询来实现这一目标。有了媒体查询，我们可以将当前迭代后的所有项目定位到display:none。

现在这可能听起来像是一项繁琐的任务，但如果您使用的是LESS等预处理器，那么这不是一项困难或容易出错的任务。

我们需要做的就是根据我们的需要在LESS mixin中设置一些变量。

看看......

CODEPEN （调整大小以查看此操作）

用法很简单 - 只需调用LESS mixin：

.box-layout(myList,li,100px,120px,1,9);

mixin需要6个参数：

1）列表选择器

2）项目选择器

3）项目最小宽度

4）item-height

5）min cols

6）max-cols

这是CSS（LESS）代码：

body {
  margin: 0;
}

.box-layout(@list-selector,@item-selector, @item-min-width, @item-height, @min-cols, @max-cols)
{
  @layout-width: ((@min-cols + 1) * @item-min-width );
  @next-layout-width: ((@min-cols + 2) * @item-min-width);
  @layout-max-width: (@max-cols * @item-min-width);
  @layout-min-width: (@min-cols * @item-min-width);

  @minColsPlusOne: @min-cols + 1;

  @list: ~" `'\n'`.@{list-selector}";
  @item: ~" `'\n'`@{item-selector}";

  @{list} {
    display: table;
    table-layout: fixed;
    margin: 0 auto;
    min-width: 90vw;
    box-sizing: border-box;
    list-style: none;
    border: 5px solid aqua;
    overflow: auto;
    padding:0;
    color: white;
  }

  @{item} {
    height: @item-height;
    display: table-cell;
    background: green;
    &:nth-child(even) {
      background:tomato;
    }
  }
  @media (max-width: @layout-width) {
    @{list} {
      width: @layout-min-width;
    }
    @{item} {
      &:nth-child(n + @{minColsPlusOne}) {
        display: none;
      }
    }
  }
  @media (min-width: @layout-max-width) {
    @{list} {
      width: @layout-max-width;
    }
  }
  .loopingClass (@layout-width, @next-layout-width, @min-cols);
}

.loopingClass (@layout-width, @next-layout-width, @iteration) when (@layout-width <= @layout-max-width) {
  @next: @iteration + 1;
  @media (min-width:@layout-width) and (max-width: @next-layout-width) {
         @{list} {
           @{item} {
            &:nth-child(n + @{next}) {
              display: none;
            }
          }
        }
      }

  .loopingClass(@next-layout-width, @next-layout-width + @item-min-width, @iteration + 1);
}

.box-layout(myList,li,100px,120px,3,10);

Answer 3

我找到了解决方案，虽然它不是一个完整的普通人

感谢Danield的回答。它接近我需要的东西

这是我的解决方案:( CODEPEN: see in action）

.child {
    float:right;
    height:80px;
    margin:5px;
    background-color:blue;
    box-sizing: border-box;
}


.looping (@item-width, @index) when (@index >= 1) {

    @media screen and (max-width: (@index * @item-width - 1px)) {
        .child {
            width: ~"calc((100% / (@{index} - 1)) - 10px)";
        }
    }

    .looping(@item-width, @index - 1);
}

.looping(250px, 10);

如何在css中对其子节点之间的父宽度进行均等划分

3 个答案:

这是一个纯粹的CSS解决方案：

CODEPEN （调整大小以查看此操作）