DIV 彼此相邻并防止换行（仅使用 css）答案

【问题标题】：DIVs next to each other and prevent line breaks ( with css only)DIV 彼此相邻并防止换行（仅使用 css）
【发布时间】：2013-03-15 20:58:15
【问题描述】：

我有 3 个 DIV：1. suiteBar、2. ribbonMain、3. ribbonSub

我喜欢按以下方式显示 DIV：

DIV1 (suiteBar) : 右（没有特定宽度）

DIV2（ribbonMain）：与DIV1在同一行（宽度：100％）

DIV3 (ribbonSub) : 在 DIV1+DIV2 下，在两个 DIV 的整个宽度上

这可能吗？每次当我给我的 DIV2 一个 100% 的宽度时，它都会产生一个“换行符”......在此处查看我的小提琴示例和代码：

http://jsfiddle.net/dkHZS/

    #topHeader { 
    display: block;
}
#suiteBar {
    background-color: Aqua;
    float: right;
    display: inline;
}
#ribbon {
    background-color: Lime;
    float: left;
    display: inline;
    width: 100%;
}
#ribbonSub {
    background-color: Gray;
}

<div id="topHeader">
  <div id="suiteBar">suiteBar</div>
  <div id="ribbon">ribbonMain
    <div id="ribbonSub">ribbonSub</div>
  </div>
</div>

【问题讨论】：

inline 元素不能浮动 - 指定一个或另一个。两者都不是。
通过给 div2 100% 的宽度，你如何在同一行对齐另一个 div？
@Simon - 你会想要使用溢出：隐藏在右边div。看到我发布的小提琴，我认为这就是你要找的。如果没有，请告诉我，我会删除它。
嗨，埃文，我已经尝试过使用属性“溢出：隐藏”，但是 DIV 功能区中的其他一些功能不再起作用......所以使用属性“溢出：隐藏”不是对我来说可能......

标签： css html css-float width

【解决方案1】：

检查这个小提琴。

I use position.

这个方法也很好用。

http://jsfiddle.net/hassaan39/NbX7P/

【讨论】：

【解决方案2】：

在右侧 div 上使用overflow:hidden：http://jsfiddle.net/dkHZS/6/

你可以这样做：

<div id="left">

</div>

<div id="right">

</div>

<div id="bottom">

</div>

CSS：

   #left{
float:left;
width: 90%;
 background: green;
    height:20px;
}
#right{

    overflow:hidden;
    background: blue;
    height:20px;
}
#bottom{
width: 100%;
float:left;
    background: red;
    height:20px;
}

【讨论】：

【解决方案3】：

不要浮动功能区 div：

#suiteBar {
    background-color: Aqua;
    float: right;
}

#ribbon {
    background-color: Lime;
}

http://jsfiddle.net/dkHZS/4/

另外，当你浮动一个元素时，它会变成一个块元素，所以将它设置为内联并不重要。

【讨论】：

感谢您的回答迈克尔。在小提琴这个例子是工作。但是，当我尝试在我的站点中使用它时，功能区 DIV 覆盖了 DIV suiteBar...任何想法为什么？其余的工作正常。
很难猜，也许在有副作用的元素上还有其他风格。诸如 postition、float 或 z-index 之类的 CSS 属性可能是一个来源。
好吧，如果我在 Chrome、Firfox 和 IE9+ 中将 'position:relative' 替换为 'position:static' 就可以了...但在 IE8 中不行...任何想法我如何可以为 IE8 解决这个问题吗？