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

【问题标题】：CSS - Multiple Columns with min-width & max-widthCSS - 具有最小宽度和最大宽度的多列
【发布时间】：2013-01-03 02:23:19
【问题描述】：

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

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

【问题讨论】：

你给了它们每个 100% 的宽度。如果你想把其中的 4 个放在一行中，你必须给每个 25% 的宽度。
这在 CSS 中并不容易。可能最直接的选项是display: table;（请参阅Use CSS display:table for Layout，IE 直到 IE8 才支持），或者新的CSS3 Flexible Boxes（但是，目前它对浏览器的支持更少：-p 当它可用时，这将是太棒了……）。
+1 用于在display: table 上进行尝试，有或没有table-layout: fixed 两种不同的算法。一个基于内容的（相对）宽度，另一个基于您指定的宽度。

标签： html fluid-layout css

【解决方案1】：

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

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

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

【讨论】：

尽管我不想为此使用 jQuery，但我认为它更聪明。在我的书中只有 2 行是可以的。感谢您提供简洁的代码和巧妙的解决方案。
由于用户可以添加和删除列，您将永远无法计算您拥有的数量，因此您可能需要 js。我知道只想在这里使用 css，但只要您已经在其他地方使用 jquery，您就不会在这里真正膨胀太多。很高兴它有帮助。
这就是我学到的。我希望使用 min- 和 max-width，至少是 min-，但不会超过 max-；那好吧。再次感谢。

【解决方案2】：

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

尽管看起来您应该使用表格而不是这种方法。

【讨论】：

真正关于使用表格。感谢您的提醒。

【解决方案3】：

CSS3 解决方案

删除.col 上的min 和max 宽度，但添加box-sizing: border-box 属性。然后在.col定义下面添加以下代码yields the result in this 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 - 这看起来很棒，除了我必须支持到 IE7。尽管有效，但使用此代码同样实用。
@motoxer4533：好的，感谢您的意见。由于您使用的是伪元素，我不会猜到您支持到 IE7（因为它无法识别它们），并且由于您在伪元素上使用了双冒号，所以您似乎并不关心 IE8任何一个。感谢您的意见。
明白了。这是一个 clearfix (nicolasgallagher.com/micro-clearfix-hack)，我删除了这个特定示例的一些代码。

【解决方案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;
}

【讨论】：

有趣的方法，也是我的最爱之一文字高。

【解决方案5】：

这里的主要问题是width: 100% 和max-width: 222px。使用width: 100%，您可以使孩子的 div 尽可能大。由于max-width: 222px，它们都变成了 222px 宽度。你的父 div 是 670px 宽度，所以如果你算一下：222px * 4 = 888px。子 div 的总宽度超过了父 div 的宽度，这就是它拉最后一个 div 的原因。

你可以试试： Codepen

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

【讨论】：

【解决方案6】：

你有以下代码。

max-width:222px;

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

max-width:166px;

为我工作！

【讨论】：

这个问题是并不总是有 4 列；这种方法行不通。
什么时候不会有 4 列？