html – 具有最大可能大小的Div(列跨越可用宽度)

概述我有一个固定宽度的父div,在一行内有3个div.我希望第二和第三个div具有适合其内容的宽度,并且第一个div将占据父级宽度的其余部分.所有div都是单行文本(nowrap),如果文本太长,则第一列可以截断文本(溢出：隐藏). 除了父div之外,我不想明确指定任何宽度. <div id='main'> <div id='col1'>span me me me me me me me</d 我有一个固定宽度的父div,在一行内有3个div.我希望第二和第三个div具有适合其内容的宽度,并且第一个div将占据父级宽度的其余部分.所有div都是单行文本(nowrap),如果文本太长,则第一列可以截断文本(溢出：隐藏).

除了父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/

解决方法 见： http://jsfiddle.net/thirtydot/FMB2M/4/

>我改用了类,因为你有#col2两次. ID应该是唯一的.
>我必须将.col1移动到HTML中的.col2之后.我希望你不介意.
>这个答案适用于ie7和所有现代浏览器.
>我添加了文本溢出：省略的省略.如果你不喜欢它,请删除它.

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>

总结

以上是内存溢出为你收集整理的html – 具有最大可能大小的Div(列跨越可用宽度)全部内容，希望文章能够帮你解决html – 具有最大可能大小的Div(列跨越可用宽度)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。