html - これは、テーブルを使用せずに達成できますか? 動的コンテナーの高さのパーセンテージ

Question

私は途方に暮れています！レイアウトにテーブルを使用しないと実現できないと思われるものを初めて発見しました。

divコンテナのサイズに基づいて高さを自動的に調整する、順序付けられていないリストの間にセパレータを配置しようとしています。

height: x%;コンテンツが動的でコンテナに高さが設定されていないため、使用できません!
position: absolute;top: 10px; bottom: 10px;div は順序付けられていないリストに対して相対的に配置する必要があるため、使用できません!

テーブルでこれを実現するのは、行を操作して同じ効果を与えるだけで非常に簡単ですが、多くの人が同意するように、テーブルは 1990 年代のものであり、絶対に必要な場合や表示している場合を除き、テーブルから離れたいと思っています。表形式のデータ。

このjsFiddleで問題を再現しました。このフィドルには多くのコードが含まれていますが、そのほとんどは無視できます。問題のdivはサブメニュー (メニューの項目 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%}

score 3 · Accepted Answer

これは最新のブラウザーで実現できますが、この世界のInternet Explorerをテストするためのデバイスを手元に持っていません。フロートの問題）。

基本的に、メニューコンテナがであることに依存する必要があります。position:relative次に、区切り記号を適切な場所に配置するために使用する div で区切り記号をラップするようにしてくださいfloat:left(つまり、ul リストの右側に沿って) - 私はを使用しまし.psepた。

これを行うと、セパレーターに使用できますposition:absolute; top:0; bottom:0;。これは、最初に配置された親に関して高さを計算するため (つまり、そうで#menuはありません.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>

html - これは、テーブルを使用せずに達成できますか? 動的コンテナーの高さのパーセンテージ

1 に答える 1

Related

Reference