浮动流体和固定宽度元件

Question

我想要一个具有以下条件的4列布局Panel Bar：

• ＃c1，＃c2 =具有特定宽度
• ＃c3自动填充剩余宽度
• ＃c4自动宽度（例如，如果添加更多列表，则增加/减少宽度）并将对应于＃c3

我正在寻找可以解决的问题：

• 让＃c4浮动到右边而不是绝对位置
• 在＃c3上没有特定的边距，它会动态地对应空格，忽略添加到＃c4的列表数量
• 在.smenu上具有可变宽度，而不是具有特定宽度以使列表项水平流动。
• 响应跨平台和设备工作（最低浏览器支持IE8）
• 水平显示smenu列表，而不使用容器的特定宽度

附加问题：

• 当我将鼠标悬停在带有班级名称.show-sub的标签时，显示.smenu /显示但当我将鼠标移动到试图将鼠标悬停在其中一个子菜单列表上时，它会被隐藏。当我悬停时，通过什么方法来保持它的开放？

不同的尝试：

我也尝试使用display：table-cell但无法正常工作。 Click here for demo

HTML

<div id="sticky-bar" class="cf">
    <div id="c1" class="left">col 1</div>
    <div id="c2" class="left">col 2</div>
    <div id="c3">
        <span class="incredibly-long-txt">So many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many tex</span>
    </div>
    <div id="c4">
        <ul class="mmenu">
            <li> 
                <a href="#" class="show-sub">m1</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">a1</a>
                    </li><li> 
                        <a href="#">a2</a>
                    </li><li> 
                        <a href="#">a3</a>
                    </li><li> 
                        <a href="#">a4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m2</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">b1</a>
                    </li><li> 
                        <a href="#">b2</a>
                    </li><li> 
                        <a href="#">b3</a>
                    </li><li> 
                        <a href="#">b4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m3</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">c1</a>
                    </li><li> 
                        <a href="#">c2</a>
                    </li><li> 
                        <a href="#">c3</a>
                    </li><li> 
                        <a href="#">c4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}
ul, li {
    margin: 0;
    padding:0;
    list-style:none;
}
a {
    color: #fff;
}
.left {
    float: left;
}
.right {
    float: right;
}
.cf:before, .cf:after {
    content:'';
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    *zoom: 1;
}
#sticky-bar {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 30px;
    background: #582A72;
    position: relative;
}
#c1 {
    width: 100px;
    height: 100%;
    background: #9775AA;
    padding: 6px;
}
#c2 {
    width: 150px;
    height: 100%;
    background: #764B8E;
    padding: 6px;
}
#c3 {
    height: 100%;
    background: #3D1255;
    padding: 6px;
    margin: 0 90px 0 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#c4 {
    background: #260339;
    position: absolute;
    right:0;
    top:0;
}
.mmenu {
    display:block;    
}
.mmenu li {
    float:left;
    width: 30px;
    height: 30px;
    text-align: center;
    border-left: 1px solid #fff;
    background: #887CAF;
}
.mmenu li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    position: relative;
}
.smenu {
    display: none; 
    background: #403075;
    position: absolute;
    top: 100%;
    right: 0;
    width: 120px;
}
.smenu li {
    background: #882D61;
}
.show-sub:hover  + .smenu {
    display: block;
}

Answer 1

您是否考虑将＃c1和＃c2 放在＃c3中。它允许你设置它们的特定宽度，向左或向右浮动它们，从而产生＃c3填充空白空间的错觉。在我需要填充空白空间的情况下，我更喜欢使用表格。根据我的经验，它需要大幅度的标记来实现div的液体宽度而不是表格。