1

HTMLテーブル/フロート/ディスプレイ:テーブルのいずれであっても、可能な限りの手段で理解しようとしているシナリオがあります。3 列の行があり、外側の列でコンテンツを内側にラップし、中央の列を展開して空のスペースをすべて埋めたいと思います。

ただし、このオブジェクトは複数回ネストされるため、固定幅のないソリューションを探しています。その場合、全体の幅が縮小します。3 つの列のうち、最も右の列の幅が問題になる場合は、常にその幅がわかります。

ここに私がやろうとしていることのフィドルがあります:

http://jsfiddle.net/gHUxy/2/

フレックスボックスがこのようなもののために作られたように見えることは知っていますが、私がそれを使用するにはまだ十分に普及していません. それは可能ですか?

編集 - ie6/7 をサポートする必要はありません

4

2 に答える 2

0

「中間」列widthではない列の を に設定してみてください1px。これにより、コンテンツに収まるまでのみ拡張する必要があります. サンプルの HTML は次のとおりです。

<table class = "main">
    <tr><td class = "notmid">Glee Glee Glee Glee Glee Glee</td><td>is</td><td class = "notmid">awesome!</td></tr>
</table>

CSS:

html, body {
    width: 100%;
}
.main {
    width: 100%;
}
.main .notmid {
    width: 1px;
    white-space: nowrap;
}

そしてちょっとしたデモ: little link .

それが何らかの形で役立つことを願っています!

于 2012-08-31T18:31:55.247 に答える
0

jQueryを使用して実現できます。最新の jQuery Lib を含めてください。

<html>
<head>
  <style type="text/css">
    section {
      display:table;
      width: 100%;
      border:1px solid red;
    }

    div {
      display: table-cell;         
    }

    .leader {
      background: grey;
    }

    .right{
      float: right;   
    }
    .left {
      float:left;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".leader").width($("section").width() - ($(".left").width() +$(".right").width()));
    });
  </script>
</head>
<body>
<section>
    <div class="left">
         Variable wrappable content
    </div>            
    <div class="leader">
        <!--empty space-->
    </div>            
    <div class="right">
        <!--fixed length-->
       Date
    </div>
</section>
</body>
</html>
于 2012-08-31T18:37:40.213 に答える