Html 不使用表格可以实现这一点吗？动态容器中的百分比高度_Html_Css_Css Tables

Html 不使用表格可以实现这一点吗？动态容器中的百分比高度

html css

Html 不使用表格可以实现这一点吗？动态容器中的百分比高度,html,css,css-tables,Html,Css,Css Tables,我不知所措！有史以来第一次，我发现了一些我认为不使用表格进行布局就无法实现的东西我试图在无序列表之间放置一个分隔符div，该分隔符根据容器的大小自动调整其高度我不能使用高度：x%因为容器上没有设置高度，因为内容是动态的我不能使用位置：绝对；顶部：10px；底部：10px因为div必须相对于无序列表放置使用表来实现这一点非常容易，只需简单地操纵行即可获得相同的效果，然而，正如你们大多数人都会同意的那样，表是用于1990年代的，除非绝对必要，或者如果我正在显示表格数据，我喜欢远离它们我在这

我不知所措！有史以来第一次，我发现了一些我认为不使用表格进行布局就无法实现的东西

我试图在无序列表之间放置一个分隔符

div

，该分隔符根据容器的大小自动调整其高度

我不能使用

高度：x%因为容器上没有设置高度，因为内容是动态的
我不能使用位置：绝对；顶部：10px；底部：10px因为div必须相对于无序列表放置
使用表来实现这一点非常容易，只需简单地操纵行即可获得相同的效果，然而，正如你们大多数人都会同意的那样，表是用于1990年代的，除非绝对必要，或者如果我正在显示表格数据，我喜欢远离它们
我在这里重新创建了这个问题。这把小提琴中有很多代码，其中大部分可以忽略。所讨论的div
是子菜单（菜单上的项目2）的一部分，它们有一类“分隔符”，其样式可以在css的末尾找到
尽管所有代码都在JSFIDLE中，但我已提取了以下相关代码片段：
请注意，我已临时将分离器的高度固定为150px，以确保它们在示例中可见
HTML:
这在现代浏览器中是可以实现的，但是我手头没有一台设备来测试这个世界上的任何一个互联网探索者，他们将是需要注意的人（当涉及到相对奇怪的位置或浮动问题时，他们是臭名昭著的）
基本上，您需要依赖菜单容器是position:relative
，然后确保用div包装分隔符，该div使用float:left
将分隔符定位在正确的位置（即沿着ul列表的右侧）-我使用了.psep

一旦你这样做了，你可以使用position:absolute；排名：0；底部：0用于分隔符，因为它将计算其相对于第一个定位的父项的高度（即#菜单
不是.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>


#菜单{
位置：相对位置；
溢出：隐藏；
}
#菜单ul{
显示：块；
浮动：左；
溢出：隐藏；
列表样式类型：无；
保证金：0；
填充：0；
} 
.psep{
浮动：左；
高度：1px；
左边距：10px；
右边距：10px；
}
.sep{
位置：绝对位置；
排名：0；
底部：0；
背景：#000；
宽度：1px；
}

这是一个标题很长的测试
二,
三,
四,
五,


一,
二,
三,
又一篇长篇
五,
六,
七,
八,


一,
二,
三,

我试过，你是小提琴手，%为你工作过me@Mythril对不起，我弄错了，我在测试时设置了容器的高度，但忘记将其移除。请看新的fiddleJust测试，然后将给出反馈：-D谢谢你，我从来没有想过使用这种方法。你是个天才！！！非常感谢你！！它甚至可以在IE7+中工作！！谢谢-谢谢，一点也不担心，这就是stackexchange的目的——捕捉到世界上可能从未想到的所有东西——我很高兴它起到了作用：）
<!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>