1

我有一个场景，我一直试图通过任何可能的方式来弄清楚，无论是 html 表/浮点数/显示：表。我有一个 3 列行，我希望外列将内容包裹在里面，中间列展开以填充所有空白空间。

但是我正在寻找一个没有固定宽度的解决方案，因为这个对象将被嵌套多次，在这种情况下整体宽度会缩小。在三列中，我总是知道最右边一列的宽度，如果这很重要的话。

这是我想要做的事情的小提琴：

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

我知道 flexbox 看起来像是为这些东西而制作的，但它还不够广泛，我无法使用它。甚至可能吗？

编辑 - 我不需要支持 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;
}

还有一个小演示：小链接。

希望以任何方式有所帮助！

于 2012-08-31T18:31:55.247 回答
0

您可以使用 jQuery 来实现它。请包含最新的 jQuery 库。

<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 回答