2

我有一个“时刻”，我被一个我认为应该很容易的问题难住了（而且可能是，我只是过于复杂了，我敢肯定）。

我希望有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;
}
4

6 回答 6

1

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

无论如何，您应该使用表格而不是这种方法。

于 2013-01-02T16:57:07.477 回答
1

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%;
}
于 2013-01-02T17:10:42.847 回答
1

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

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

工作小提琴。插入或删除更多列并重新运行它以查看它是如何工作的。

于 2013-01-02T18:23:19.660 回答
0

你可以尝试这样的事情：

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;
}
于 2013-01-02T17:04:20.890 回答
0

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

你可以试试： Codepen

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

于 2013-01-02T17:20:54.777 回答
-1

您有以下代码。

max-width:222px;

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

max-width:166px;

为我工作！

于 2013-01-02T16:56:19.890 回答