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与最大可能的大小（列跨越可用宽度）

回答

相关问题