2

我很茫然！有史以来第一次，我发现了一些我认为如果不使用表格进行布局是无法实现的。

我试图在div无序列表之间放置一个分隔符，它会根据容器的大小自动调整其高度。

  1. 我不能使用height: x%;，因为容器上没有设置高度，因为内容是动态的！
  2. 我不能使用position: absolute;top: 10px; bottom: 10px;，因为 div 必须相对于无序列表放置！

通过简单地操作行来获得相同的效果，使用表格来实现这一点非常容易，但是，正如你们中的许多人会同意的那样，表格适用于 1990 年代，除非绝对必要或者我正在展示，否则我喜欢远离它们表格数据。

我在这个jsFiddle中重新创建了问题。这个fiddle里面有很多代码，大部分可以忽略。有问题的div's 是子菜单（菜单上的第 2 项）的一部分，它们有一个“分隔符”类，其样式可以在 css 的末尾找到。

虽然所有代码都在 jsFiddle 中，但我提取了下面的相关片段：

请注意，我暂时将分隔符的高度固定为 150px，以确保它们在示例中可见

HTML：

<li id="shiNav"><a href="#" title="#">Item 2</a>
    <div class="subMenuHandle horizontal-sprite">
        <div class="bg-noise"></div>
    </div>
    <div class="subMenu horizontal-sprite">
        <div class="bg-noise"></div>
        <ul>
            <li><a href="#"><strong>Menu Item 1</strong></a></li>
            <li><a href="#"><strong>Menu Item 2</strong></a></li>
            <li><a href="#"><strong>Menu Item 3</strong></a></li>
            <li><a href="#"><strong>Menu Item 4</strong></a></li>
        </ul>
        <div class="separator"></div>
        <ul>
            <li class="title">Recently Opened File</li>
            <li><a href="#">File 1</a></li>
            <li><a href="#">File 2</a></li>
            <li><a href="#">File 5</a></li>
            <li><a href="#">File 20</a></li>
        </ul>
        <div class="separator"></div>
        <ul>
            <li class="title">Most Used Customers</li>
            <li><a href="#">John Smith &amp; Co</a></li>
            <li><a href="#">ManSys Limited</a></li>
            <li><a href="#">Sine Macula Limited</a></li>
            <li><a href="#">Infralobo PLC</a></li>
            <li><a href="#">Lays PLC</a></li>
        </ul>
    </div>
</li>

CSS：

/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}

#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;background-image:url("http://www.mansys.net/_test/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}

/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}

/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}

/* Set the sub menu handles */
#global-nav .subMenuHandle {position:relative;display:none;width:90px;height:12px;margin-top:-1px;border-left:1px solid #666;border-right:1px solid #666;z-index:1000;background-color:#fff;background-repeat:repeat-x;}

/* Set the sub menu container */
#global-nav .subMenu {position:relative;display:none;margin-top:-1px;width:870px;padding:10px 20px;border:1px solid #666;z-index:999;background-color:#ddd;background-position:0 -12px;background-repeat:repeat-x;overflow:hidden;clear:both;border-radius:3px;}

/* Set the menu hovers to show sub menus */
#global-nav ul li:hover .subMenuHandle,
#global-nav ul li:hover .subMenu
{display:block;}

/* Set the sub menu container positions */
#masNav .subMenu {margin-left:-83px;}
#shiNav .subMenu {margin-left:-183px;}
#repNav .subMenu {margin-left:-283px;}
#setNav .subMenu {margin-left:-383px;}

/* Set the noise in the menus */
.bg-noise {position:absolute;left:0;top:0;width:100%;height:100%;background:url("https://www.mansys.net/_images/_global/bg-noise.png") repeat;}

/* Define sub menu Contents */
#global-nav .subMenu ul {display:block;float:left;overflow:hidden;}
#global-nav .subMenu ul li {display:inline;width:auto;height:25px;margin:0;float:none;background:none;}
#global-nav .subMenu ul li.title {line-height:25px;font-size:12px;color:#666;text-shadow:#fff 0 1px 0;text-align:left;}
#global-nav .subMenu ul li a {position:relative;display:block;width:auto;height:25px;line-height:25px;font-size:12px;color:#333;text-shadow:#fff 0 1px 0;text-align:left;z-index:1000;}

/* Define the sub menu separator */
#global-nav .subMenu .separator {position:relative;float:left;width:1px;background:#999;margin:20px 20px 0;height:90%}
4

1 回答 1

3

它在现代浏览器中是可以实现的，但是我没有设备可以测试这个世界上的任何Internet Explorer，它们将是需要注意的（它们在位置相对奇怪或浮动问题）。

基本上你需要依赖你的菜单容器position:relative，然后确保你用一个 div 包装你的分隔符，该 div 用于float:left将分隔符定位在正确的位置（即沿着你的 ul 列表的右侧） - 我用过.psep。

一旦你这样做了，你就可以使用position:absolute; top:0; bottom:0;你的分隔符，因为它会计算它相对于第一个定位的父级（即#menunot .psep）的高度，但会计算它相对于你的 ul 列表的水平位置。

希望这有意义吗？我在下面整理了一个例子......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

#menu {
  position: relative;
  overflow: hidden;
}

#menu ul {
  display: block;
  float: left;
  overflow: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
} 

.psep {
  float: left;
  height: 1px;
  margin-left: 10px;
  margin-right: 10px;
}

.sep { 
  position: absolute;
  top: 0;
  bottom: 0;
  background: #000;
  width: 1px;
}

</style>
</head>
<body>
  <div id="menu">
    <ul>
      <li>This is a test with a long title</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <div class="psep"><div class="sep"></div></div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>Another long text</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
    <div class="psep"><div class="sep"></div></div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>
</html>
于 2012-08-24T08:55:26.187 回答