CSS：表格单元格宽度声明被忽略答案

【问题标题】：CSS: table-cell width declaration is ignoredCSS：表格单元格宽度声明被忽略
【发布时间】：2014-10-09 07:56:53
【问题描述】：

我有一个水平菜单栏，可以有 1 到 4 个链接。

我希望每个链接的宽度为 25%，而不取决于它们的数量（因此，如果只有 3 个链接，菜单栏应该只有另一个有 4 个链接的链接的 75%）。

使用浮动到达目标，但如果较长的文本跨越 2 行，则无法相应调整其他链接的高度，因此我使用 display:table-cell 解决此问题，但如果是 3 个链接，则完全忽略width:25%，它的渲染就像宽度为 33%。

<div class="container">
    <div class="block">
        <a href="#">Link 1</a>
    </div>
    <div class="block">
        <a href="#">Link 2</a>
    </div>
    <div class="block">
        <a href="#">
            Link 3 with very long text tha span across 2 rows
        </a>
    </div>
</div>


.container {
    display: table;
    width: 100%;
    border:solid 1px blue;
}

.block {
    border: 1px solid red;
    display: table-cell;
    width: 25%;
}

请查看此 jsFiddle 以了解这两种情况。

期望的结果是第二个菜单栏链接继续具有与第一个相同的宽度，而不是变为 33%。

我还尝试在其他线程中添加 table-layout:fixed，但没有用

如何解决？

【问题讨论】：

我不知道为什么，但你可以像这个演示一样解决这个问题 - jsfiddle.net/bjf1fw8a
您可以在末尾放置一个空块：<div class="block"> </div>，或者如果您想缩短整个内容，您可以在第二种情况下将container 的宽度减小为75%。但是如果你的容器的宽度保持在 100% 并且它只填充了三个元素，那么 js 应该如何知道如何处理额外的空间呢？它将被填充到 100%，不同元素之间的宽度比决定了它们的贡献。
您应该在问题本身中包含足够的代码（也包括 HTML），以便重现问题。

标签： css layout tablecell

【解决方案1】：

当您要求浏览器显示一个包含三列的表格以使每列的宽度为总宽度的 25% 时，您提出了一个逻辑上不可能的请求。您不能将表格的宽度设置为自身的 75%。然后浏览器倾向于将空间平均分配给列。

一个简单的解决方法是从.container 的规则中删除width: 100%，并在第二个“表格”（div 元素格式化为表格）上设置width: 75%。

【讨论】：

嗨，我不能为容器设置不同的宽度，因为链接的数量会发生动态变化。请在 Bagavatu 的回答下查看我的评论，了解更多详细信息。
您应该通过编辑问题来澄清问题，以便无需阅读答案和cmets（甚至可能被删除）也可以理解。

【解决方案2】：

使用 flexbox 怎么样？

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border:solid 1px blue;
}

.block {
  border: 1px solid red;
  max-width: 25%;
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;        /* Opera/IE 8+ */
}

a{
  display: block;
  padding: 10px;
}

通过这种方式，您可以轻松地相应调整 .block 元素的高度... 这是我的解决方案：http://jsfiddle.net/o462q4ce/

【讨论】：

在我提供的代码中使用 sintax，它也应该在 IE10 中工作。根据 caniuse.com IE10 支持 Flexible Box Layout Module 的 2012 sintax。来源：caniuse.com/#search=flex
哦，对不起。我完全误解了你的评论

【解决方案3】：

请检查这个。

var n = $(".container .block").length;
var w = (100/n);
$(".container .block").width(w+'%');

见jsFiddle。希望对您有所帮助。

【讨论】：

谢谢，可能是一个解决方案，但如果可能的话，我想保留一个简单的 css 。 :-)

【解决方案4】：

结合使用 :last-child 和 :nth-child() 选择器，您可以准确定位您需要修改的 div.block。不幸的是，使用表格布局不允许您按照我的意愿管理边距和宽度......

无论如何，这里有一个适合您需求的解决方案

.block:last-child:nth-child(3) {width:auto; padding-right:25%;}
.block:last-child:nth-child(2) {width:auto; padding-right:50%;}
.block:last-child:nth-child(1) {width:auto; padding-right:75%;}

在这个 jsFiddle 中，您可以看到这些选择器的运行情况：http://jsfiddle.net/5t0fq1sy/

【讨论】：

几乎，但是.....第二行中的最后一个链接比其他链接长两倍。想象有一个背景应用到 .block，你会看到它跨越了容器的所有宽度......