Question

我有一个场景，我一直试图通过任何可能的方法弄清楚，无论是html tables / floats / display：table。我有一个3列的行，我希望外部列包含内容，中间列展开以填充所有空白空间。

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

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

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

编辑 - 我不需要支持ie6 / 7

Answer 1

您可以尝试将不 <“中间”列的列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。

希望以任何方式提供帮助！

Answer 2

您可以使用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>

展开列以填充没有固定宽度的空内容？

2 个答案: