两个相邻的 div 没有固定宽度的元素 [重复]

Posted 2023-03-06

【中文标题】两个相邻的 div 没有固定宽度的元素 [重复]

【英文标题】：two divs next to each other with no fixed width elements [duplicate]

【发布时间】：2014-03-29 10:30:02

【问题描述】：

我目前对“两个相邻的 div”主题的大量问题感到震惊。当我试图创建相同的内容时，我已经阅读了几个小时并尝试了我可以谷歌的所有解决方案。但没有结果。 所以我希望 SO 用户群可以帮助我。

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

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

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

提前感谢您的帮助。

<style>
.head-areawidth:100%;
.headerfloat:left;background:#fe0000;
.navigationfloat:left;background:#feda08;
.head-areaclear: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>

【问题讨论】：

刚刚注意到，您忘记关闭问题中的最后一个div（可能是复制/粘贴错误）。我用更正更新了我的小提琴

是的，我忘了。我快速创建了这个，因为我不允许使用来自生产站点的代码。他们对此非常严格。所以我必须提供看起来相似的代码。而复制粘贴的错误在于一个小的击键。我已经更新了我原来的问题以添加缺少的 div。谢谢。

我解决了您在使用当前网站导航和徽标时遇到的问题。你删除了问题？

那是个错误。我正在寻找如何找回它。但我找不到它。哦，我在我的消息列表中找到了它。现在应该取消删除。我对此感到抱歉。这么多人想同时做。我按错了删除。需要删除其他内容并最终删除了对我有帮助的帖子。谢谢你指出。请发布您的解决方案并感谢您的帮助。

@Mimi 感谢您的评论，但绝对不是该问题的重复。在该问题中，可以使用固定宽度字段给出答案，正如您在所选答案 #wrapperwidth: 500px; 中看到的那样，我要求将它们彼此相邻放置，并且没有宽度元素。

【参考方案1】：

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

【参考方案2】：

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

只要去掉.navigation的浮动，它就会填满所有剩余空间：

.head-areawidth:100%; overflow:hidden;
.headerfloat:left;background:#fe0000;
.navigationoverflow:hidden; background:#feda08;
.head-areaclear:both;

Demo

【讨论】：

非常感谢您的回答。它就像一个魅力。不仅是 jsfiddle，而且在生产站点中，这与我原来的 jsfiddle 有点不同。

【参考方案3】：

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

看到这个FIDDLE

如果.logo + .navigation 对于它们的容器来说太宽，.navigation 将显示在两行中。

【讨论】：

感谢您的回答，它在 jsfiddle 中工作，但在生产站点上却不是。这不是因为答案不好，而是因为生产站点的设置。但我真的很高兴你的回答，并会赞成。

@HennySm after you are welcome

【参考方案4】：

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

.header 
    float:left;


.navigation 
    overflow-x: hidden;

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

Working Demo.

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

【讨论】：

您的回答清晰正确。它正在处理示例小提琴和生产站点。我首先阅读了 Oriol 的答案并将其选为最佳答案。但如果可以的话，我会选择你的两个作为最佳答案。非常感谢你。感谢您提供简单而简短的解释。

@HennySmafter 别提了。我会删除它，因为其他人的答案已经足够好了；虽然我之前已经回答过了。

是的，我知道时间线有点 ****** 了。但我被叫离开办公桌，并在 +/- 30 分钟后返回。返回时，我按下刷新并从顶部开始。我很抱歉。

【参考方案5】：

使用新的 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;

【讨论】：

这种弹性布局非常棒。我今天学到了一些东西。这种灵活的方法要感谢你。我已经用 Orion 的回答解决了这个问题。但你的也很棒。我要感谢您为此付出的时间来教育我并为我提供这个很棒的链接。

【参考方案6】：

FIDDLE

请注意，.cell:nth-child(1) 的 width:1% 将确保红色“单元格”的大小适合其内容。

HTML

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

CSS

.table 
    display:table;
    width:100%;

.row 
    display:table-row;

.cell 
    display:table-cell;
    background:#feda08;

.cell:nth-child(1) 
    background:red;
    width:1%;

【讨论】：

您的 jsfiddle 和其他许多人一样是一件艺术品。它工作得很好。但是，它不适用于我的生产站点。它适用于我无法更改的特定代码集。因此我不能使用你的解决方案，但我相信其他人可以，因为它工作得很好。感谢您的时间和回答。

@HennySmafter 非常感谢您的评论，很高兴您找到了解决方案！

【参考方案7】：

您可以使用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-areawidth:100%; display: table;
.headerdisplay: table-cell;background:#fe0000;
.navigationdisplay:table-cell;background:#feda08;

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

【讨论】：

经过这么多小时的搜索得到这么多好的回复真是难以置信。您的解决方案在 jsfiddle 中效果很好。但是，它在生产站点中不起作用，这完全与生产站点的设置方式有关。我赞成您的回答，因为它有效。

谢谢。我希望你完成你想要的。