Question

我有一个“时刻”，我在一个我认为应该很容易的问题上难过（可能是，我只是过于复杂，我确定）。

我希望div有多个孩子div's;孩子们应该根据自己的号码自动扩展或收缩（我正在使用的网站位于允许用户添加或删除项目的CMS中）。

我的问题是让div's尊重最小和最大宽度声明。我有一种预感，它可能与他们float:left有关，但我尝试了其他一些没有运气的变种。

我的主要目标是让这些列在一个“行”上填充空间，最多4列。

编辑： 我需要将这些列设置为最小宽度以及最大宽度。因此，如果有3个孩子div's，那么他们应该比有4个孩子div's更宽。

以下是我的代码示例：http://codepen.io/joe/full/IJvGp

HTML

<div class="sub cf">
  <div class="row">
      <div class="col">
          Column 1
      </div>

    <div class="col">
        Column 2
      </div>

      <div class="col">
        Column 3
    </div>

    <div class="col">
        Column 4
    </div>
  </div>
</div>

CSS

.sub {
  width: 670px;
  background: #fff;
  border: 10px solid #414042;
}

.sub .row {
  padding: 0;
  float: left;
  width: 100%;
}

.sub .row .col {
  min-width: 166px;
  max-width: 222px;
  width: 100%;
  float: left;
  border-right: 1px solid #D0D2D3; 
  margin: 0;
  padding: 0;
}


.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}

Answer 1

删除width:100%;项目上的.sub .row .col会使它们显示在4列中。

无论看起来你应该使用表而不是这种方法。

Answer 2

CSS3解决方案

删除min上的max和.col宽度，但将box-sizing: border-box属性添加到该.col。然后在.sub .row .col:nth-last-of-type(2), .sub .row .col:nth-last-of-type(2) ~ .col { width: 50%; } .sub .row .col:nth-last-of-type(3), .sub .row .col:nth-last-of-type(3) ~ .col { width: 33.3%; } .sub .row .col:nth-last-of-type(4), .sub .row .col:nth-last-of-type(4) ~ .col { width: 25%; }定义yields the result in this fiddle：

下面添加以下代码

{{1}}

Answer 3

使用jquery，您可以根据行中的列数动态地将列宽设置为％。

var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);

working fiddle。插入或删除更多列并重新运行以查看其工作原理。

Answer 4

您可以尝试这样的事情：

HTML：

<div class="sub">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS：

.sub {
    text-align: justify;
    width: 670px;
    background: #fff;
    sborder: 10px solid #414042;
}

.sub div {
    display: inline-block;
    max-width: 166px;
    min-height: 100px;
    border-right: 1px solid #D0D2D3;
    margin: 0;
    padding: 0;
}

.sub:after {
    content: '';
    width: 100%;
    display: inline-block;
}

Answer 5

这里的主要问题是width: 100%和max-width: 222px。使用width: 100%，你可以让孩子们尽可能大。因为max-width: 222px它们都变成了222px的宽度。你的父div是670px宽，所以如果你做数学：222px * 4 = 888px。儿童divs的总宽度超过了父母的宽度，这就是为什么它会拉下最后一个div。

你可以试试： Codepen

如果你不太关心支持IE8-那么ScottS解决方案是最好的。

Answer 6

您有以下代码。

max-width:222px;

将它降低到某个值，以便它可以容纳！

max-width:166px;

适合我！

CSS - 具有最小宽度和最大值的多列最大宽度

6 个答案:

CSS3解决方案