html – 两个div彼此相邻,没有固定宽度的元素

概述参见英文答案 > Expand a div to take the remaining width                                    21个 我目前对这个问题的绝大多数问题感到震惊“两个谜彼此相邻”.当我试图创建相同的东西时,我已经阅读了几个小时,并尝试了我可以谷歌的每个解决方案.但没有结果. 所以我希望SO用户群可以帮助我. 我有2个div,其中一个标题(标识 参见英文答案 > Expand a div to take the remaining width                                    21个
我目前对这个问题的绝大多数问题感到震惊“两个谜彼此相邻”.当我试图创建相同的东西时,我已经阅读了几个小时,并尝试了我可以谷歌的每个解决方案.但没有结果.
所以我希望SO用户群可以帮助我.

我有2个div,其中一个标题(标识)可以是任意大小(客户上传自己的标识).导航(菜单)的另一个div也由客户自己设置.因为客户端创建内容(徽标菜单),所以我无法在px或其他中设置任何宽度元素(据我所知).

我想要实现的是标题div同样大,以便它适合徽标(图像)或徽标(文本).并且导航填充了右侧的所有其他可用空间.

请看这个小提琴：http://jsfiddle.net/nSY4P/

我在这里先向您的帮助表示感谢.

<style>.head-area{wIDth:100%;}.header{float:left;background:#fe0000;}.navigation{float:left;background:#feda08;}.head-area{clear:both;}</style><div > <div >CLIENT logo</div> <div >ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div> <div ></div></div>

解决方法 无需使用display：flex也不显示：table-cell.

只需删除.navigation的浮动,它将填充所有剩余空间：

.head-area{wIDth:100%; overflow:hidden;}.header{float:left;background:#fe0000;}.navigation{overflow:hidden; background:#feda08;}.head-area{clear:both;}

Demo

总结

以上是内存溢出为你收集整理的html – 两个div彼此相邻,没有固定宽度的元素全部内容，希望文章能够帮你解决html – 两个div彼此相邻,没有固定宽度的元素所遇到的程序开发问题。

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