html - float 流体和定宽元件

我想要具有以下条件的4列布局面板栏：


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


我正在寻找一种可能的解决方案：


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


附加问题：


当我将鼠标悬停在类名称为.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;
}

最佳答案

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

关于html - float 流体和定宽元件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24729412/