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

我希望每个链接的宽度不要取决于它们的数量（所以如果只有3个链接，菜单栏应该只有另外4个链接的75％）。

使用浮动到达目标，但是如果跨越两行的文本较长，无法相应地调整其他链接的高度，所以我使用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在其他线程读取，但是是无用

如何解决这个问题？

来源

2014-10-09 Luca Detomi

我不知道为什么，但你可以解决像这个演示的问题 - http://jsfiddle.net/bjf1fw8a/ – Anonymous 2014-10-09 08:12:51

你可以把一个空的块在最后：'

'或如果你想要缩短整个事物，可以将第二种情况下'container'的宽度减少到'75％'。但是，如果您的容器宽度保持在100％，并且只填充了三个元素，那么js应该如何知道如何处理额外空间？它将被填充到100％，不同元素之间的宽度比决定了它们的贡献。 – 2014-10-09 08:18:58

根据需要，您应该在问题本身中包含足够的代码（HTML也一样）以重现问题。 – 2014-10-09 08:20:17

当您要求浏览器显示三列表格以使每列的宽度为总宽度的25％时，您正在提出一个逻辑上不可能的请求。你不能让表格的宽度达到75％。浏览器则倾向于将空间均匀分配到列。

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

来源

2014-10-09 08:31:44

嗨，我无法为容器设置不同的宽度，因为链接的数量会发生变化。请查看我在Bagavatu的回答下的评论，以了解更多细节。 – 2014-10-09 09:04:48

您应该通过编辑问题来澄清问题，以便在不阅读答案和评论（甚至可能会被删除）的情况下这是可以理解的。 – 2014-10-09 11:33:10

请检查。

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

请参阅jsFiddle。希望能帮助到你。

来源

2014-10-09 08:57:32

谢谢，可能是一个解决方案，但如果可能，我想留在一个简单的CSS一个。 :-) – 2014-10-09 09:05:40

如何使用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/

来源

2014-10-09 09:11:15 thetont

不错的主意，但.... IE10是非常严格costraint我的客户.... :-( – 2014-10-09 09:28:56

在代码中使用sintax我提供它应该在IE10工作。根据caniuse.com IE10支持2012年sintax的灵活箱布局模块来源：http://caniuse.com/#search=flex – thetont 2014-10-09 14:03:03

正如我所说....“IE10”，但IE9是必需的太不幸... – 2014-10-09 15:00:25

使用的组合：最后的孩子和:nth-child()选择可以定位准确您需要修改div.block。不幸的是使用表格布局不会让你如我所愿管理保证金和宽度...

反正这里是一个解决方案可以在此的jsfiddle适合您的需求

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

你可以看到这些选择在行动：http://jsfiddle.net/5t0fq1sy/

来源

2014-10-09 17:21:48 thetont

差不多，但是......第二行的最后一个链接比其他的长两倍，假设有一个背景应用于.block，你会发现它跨越了所有的容器宽度.... – 2014-10-09 17:55:20

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

回答

相关问题