Question

我有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>

Answer 1

在右侧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;
}

Answer 2

不要漂浮色带div：

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

#ribbon {
    background-color: Lime;
}

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

此外，当您浮动元素时，它将成为块元素，因此将其设置为内联无关紧要。

Answer 3

检查这个小提琴。

I use position.

这种方法也很有效。

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

DIV彼此相邻并防止换行（仅限css）

3 个答案: