DIV與最大可能的大小（列跨越可用寬度）

我有一個固定寬度的父母的div，內部3個div，在一行。我希望第二和第三個div具有適合其內容的寬度，第一個div將佔用父寬度的其餘部分。所有div都是單行文本（nowrap），如果第一列太長（overflow:hidden），則第一列可以截斷文本。DIV與最大可能的大小（列跨越可用寬度）

我不想明確指定任何寬度，除了父div。

<div id='main'> 
    <div id='col1'>span me me me me me me me</div> 
    <div id='col2'>abc</div> 
    <div id='col2'>def</div> 
</div> 

div { 
    border: 1px solid black; 
    float: left; 
    white-space: nowrap; 
    overflow: hidden; 
} 

div#main { 
    width:200px; 
} 

div#col1 { 
    /*width:150px;*/ /* I don't want this! */ 
} 

div#col2 { 
    float:right; 
}

小提琴這裏： http://jsfiddle.net/FMB2M/

來源

2011-08-21 Jakub M.

它是'overflow：hidden;'不重疊... – Nayish

'id'應該是唯一的，用'class'代替。當你想限制一個元素的寬度時，你必須設置寬度。 –

參見：http://jsfiddle.net/thirtydot/FMB2M/4/

我切換使用類，而不是因爲你有#col2兩次。 ID應該是唯一的。
我不得不將.col1移動到HTML中的.col2之後。我希望你不介意。
此答案適用於IE7 +和所有現代瀏覽器。
我加了text-overflow: ellipsis整潔。如果你不喜歡它，請將其移除。

CSS：

div { 
    border: 1px solid black 
} 
.main { 
    width: 200px; 
    float: left 
} 
.col1 { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis 
} 
.col2 { 
    float: right 
}

HTML：

<div class='main'> 
    <div class='col2'>abc</div> 
    <div class='col2'>def</div>  
    <div class='col1'>span me me me me me me me</div> 
</div>

來源

2011-08-21 18:35:25 thirtydot

我不知道這個'text-overflow：ellipsis'（甚至''vim'語法熒光筆不知道那個......）;奇蹟般有效！ –

我建議增加顯示：表細胞;到每個col div，然後指定你需要的寬度。並可能嘗試＃主顯示：錶行; ..讓我知道如果這個工程..可能需要浮動屬性刪除如果不是。

來源

2011-08-21 18:29:43 Ben

你是否設法解決這個問題？ – Ben

把第二和第三的div第一（COL1）DIV中

而且你不能給2元素相同的ID雖然這可能是你的問題而不是一個錯字您的代碼

來源

2011-08-21 18:38:51

您可以使用Flexible Box model來實現您所需的功能。

參見：http://jsfiddle.net/FMB2M/13/

注意，這是由not supported老的瀏覽器（或Opera的最新版本）。

div { 
    border: 1px solid black; 
    white-space: nowrap; 
    overflow: hidden 
} 

div#main { 
    width:200px; 
    display:-webkit-box; 
    display:-moz-box; 
    display:box; 

    -webkit-box-orient:horizontal; 
    -moz-box-orient:horizontal; 
    box-orient:horizontal; 

    -webkit-box-align:start; 
    -moz-box-align:start; 
    box-align:start 
} 

div.col1 { 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
    box-flex:1; 
    text-overflow:ellipsis 
}

來源

2011-08-21 18:50:10

DIV與最大可能的大小（列跨越可用寬度）

回答

相關問題