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：表格單元格寬度聲明被忽略

回答

相關問題