CSS - 最小宽度和最大宽度的多列布局

Question

我遇到了一个问题，本以为很简单的事情却让我有点困惑（也许我只是过于复杂化了）。我希望有一个

包含多个子

；这些子元素应根据数量自动扩展或收缩（我正在使用 CMS 系统，允许用户添加或删除项目）。

我的问题在于如何令

遵守最小和最大宽度的声明。我有一个猜测，可能与它们的float:left有关，但我尝试了其他一些变体也没有成功。

我的主要目标是让这些列填满它们的空间，在一行上最多有4个列。

编辑：我需要将这些列设定为最小宽度和最大宽度。因此，如果有3个子

，它们应该比有4个子

时更宽。

以下是我的代码示例：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;
}

- Damon Bauer

---

你给它们每个都设置了100%的宽度。如果你想在一行中放置4个，你需要给每个设置大约25%的宽度。 - DA.

在 CSS 中做到这一点并不容易。可能最简单的选项是使用 display: table;（参见使用CSS显示：表格布局，但在IE8之前不受支持）或新的 CSS3 弹性盒子（然而，它目前的浏览器支持甚至更少 :-p 当它可用时，它将是很棒的...）。 - thirdender

尝试使用display: table，无论是否使用table-layout: fixed，对于两种不同的算法都可以得到+1。其中一种基于内容的（相对）宽度，另一种基于您指定的宽度。 - FelipeAls

Answer 1

CSS3解决方案

移除.col上的min和max宽度，但添加box-sizing: border-box属性。然后在.col定义下面添加以下代码，可在此fiddle中查看结果：

.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%;
}

- ScottS

---

ScottS - 这看起来很不错，但我必须支持IE7及以下版本。使用这段代码同样实用，虽然它的效果可能会有所降低。 - Damon Bauer

@motoxer4533：好的，感谢你的建议。因为你使用了伪元素，我本来不会猜到你支持IE7及以下版本（因为它们不支持伪元素），而且你在伪元素上使用了双冒号，看起来好像你也不关心IE8。再次感谢你的建议。 - ScottS

明白了，这是一个clearfix（http://nicolasgallagher.com/micro-clearfix-hack/），我为了这个特定的示例删除了一些代码。 - Damon Bauer

Answer 2

通过使用jQuery，您可以根据行中的列数动态设置列宽度为基于百分比。

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

工作示例。插入或删除更多列并重新运行它以查看它的工作原理。

- Scrimothy

---

尽管我不想使用jQuery，但我认为这是更明智的选择。只有两行代码可以接受。感谢你简洁的代码和聪明的解决方案。 - Damon Bauer

由于用户可以添加和删除列，因此您永远无法对其数量进行核算，因此您可能需要使用js。我知道您想在这里仅使用css，但只要您已经在其他地方使用jquery，那么您在这里并没有太多的负担。很高兴它能帮上忙。 - Scrimothy

这就是我学到的。我的希望是使用min-和max-width，它至少应该是min-，但不超过max-；哦，好吧。再次感谢。 - Damon Bauer

Answer 3

移除 .sub .row .col 元素上的 width:100%; 样式，可以让它们以4列的形式显示。

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

- corymathews

---

使用表格是正确的。感谢提醒。 - Damon Bauer

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;
}

- Ryan

---

有趣的方法，也是我最喜欢的之一 :-p 我关于这个技术的问题在这里 “text-align: justify;” inline-block elements properly?。我遇到的问题是 :after 清除元素会产生一个高度为一行文字的空白。 - thirdender

Answer 5

主要问题在于width: 100%和max-width: 222px。使用width: 100%会使子div尽可能大。由于max-width: 222px，它们都变成了222像素宽。您的父div宽度为670像素，因此如果进行计算：222px * 4 = 888px。子div的总宽度超过了父div的宽度，这就是为什么它会拉下最后一个div的原因。

您可以尝试： Codepen

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

- Angel Yan

Answer 6

你有以下代码。

max-width:222px;

将其减少到某个值，以便容纳它！

max-width:166px;

对我来说可行！

- Sumit Gera

---

问题在于并不总是有4列；这种方法行不通。 - Damon Bauer

这个什么时候不会有4列了？ - Sumit Gera