的 FIDDLE

Question

我目前对这个问题的绝大多数问题感到震惊“两个谜彼此相邻”。当我试图创建相同的东西时，我已经阅读了几个小时，并尝试了我可以谷歌的每个解决方案。但没有结果。所以我希望SO用户群可以帮助我。

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

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

感谢您的帮助。

<style>
.head-area{width:100%;}
.header{float:left;background:#fe0000;}
.navigation{float:left;background:#feda08;}
.head-area{clear:both;}
</style>

<div class="head-area">
 <div class="header">CLIENT LOGO</div>
 <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
 <div class="head-area-clear"></div>
</div>

Answer 1

无需使用display: flex或display: table-cell。

只需移除.navigation的浮动，它就会填满所有剩余的空间：

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

Demo

Answer 2

最简单的方法是在float:left;上将width:100%;替换为.navigation

请参阅 FIDDLE

如果.logo + .navigation为其容器的宽度，则.navigation将显示在两行上。

Answer 3

如果您希望.navigation填充剩余空间，则不应该浮动该元素。您可以浮动徽标（.header）并使用overflow-x: hidden;为.navigation隐藏水平溢出，如下所示：

.header {
    float:left;
}

.navigation {
    overflow-x: hidden;
}

由于.navigation是文档正常流程中的块级元素，因此您不必设置width: 100%;。

<强> Working Demo

不使用overflow-x: hidden;，.navigation将位于徽标下方。设置背景颜色以验证。

Answer 4

您可以使用display:table和display:table-cell代替花车。

<div class="head-area">
 <div class="header">CLIENT LOGO</div>
 <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
</div>

和css：

.head-area{width:100%; display: table;}
.header{display: table-cell;background:#fe0000;}
.navigation{display:table-cell;background:#feda08;}

http://jsfiddle.net/nSY4P/2/

Answer 5

的 FIDDLE

请注意，width:1%的{{1}}会确保红色“单元格”的大小适合其内容。

HTML

.cell:nth-child(1)

CSS

<div class='table'> <div class='row'> <div class='cell'>Logo</div> <div class='cell'>Item</div> <div class='cell'>Item</div> </div> </div>

Answer 6

使用新的CSS3 flex布局（不需要浮动，不需要清除浮动，自动适应。更多信息请访问：http://css-tricks.com/snippets/css/a-guide-to-flexbox/）：

工作小提琴：http://jsfiddle.net/nSY4P/5/

HTML：

<div class="head-area">
    <div class="header">CLIENT LOGO</div>
    <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
</div>

CSS：

.head-area {
    display: flex;
    flex-direction: row;
}
.header {
    background:#fe0000;
}
.navigation {
    background:#feda08;
    flex: auto;
}

Answer 7

我一直在寻找这个奇怪的问题好几个小时。解决方案很简单，设置溢出：隐藏导航div：）

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

7 个答案:

的 FIDDLE