1

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

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

我正在寻找一种解决方案，可以：

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

附加问题：

  • 当我将鼠标悬停在类名为 .show-sub 的标签上时，.smenu 会显示/显示，但是当我将鼠标移到试图将鼠标悬停在其中一个子菜单列表上时，它会隐藏。当我悬停时，有什么办法让它保持打开状态？

不同的尝试：

我也尝试过 display:table-cell 但无法正常工作。点击这里进行演示

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;
}
4

1 回答 1

0

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

于 2014-10-15T16:13:33.830 回答