Question

我试图找到一种使用css创建1行3列表的简单方法。我希望表格宽度为容器div的宽度，高度为1行。第一列和第三列应展开以包含文本的宽度。中间列应填充任何剩余宽度（最大为容器宽度），并隐藏溢出。

我遇到了中间栏的问题。当我使用white-space：nowrap和overflow：hidden时，它将表扩展到容器div的宽度之外。

<div style="width:500px;">
<table style="width:100%;">
    <tr>
        <td style="white-space:nowrap;">
            Title is Here
        </td>
        <td style="">
            When this is too long to display on one line the overflow is hidden
        </td>
        <td style="white-space:nowrap;">
            Last updated 12:05pm
        </td>
    </tr>
</table>
</div>

或者使用div可能更简单吗？但我无法弄清楚如何使中心div只填充可用空间而不是移动到下一行。

<div style="width:500px;">
    <div style="float:left;">
        Title is Here
    </div>
    <div style="float:left;">
        When this is too long to display on one line the overflow is hidden
    </div>
    <div style="float:right;">
        Last updated 12:05pm
    </div>
</div>

Answer 1

you could do it with div based layout too

CSS

     .table{width: 100%; }
     .table, .table .item{ height: 20px; overflow: hidden;}
     .table .item{float: left; box-sizing: border-box; -moz-box-sizing: border-box; background: #fcc; text-align: center;}
     .table .item.right{float: right;}
     .table .center{float: none; background: #ccf; }

标记

  <div class="table">
     <div class="item left">left content</div>
     <div class="item right">right content</div>
     <div class="center item">some center content</div>
  </div>

Answer 2

您的中间td没有指定任何width或height。因此，它具有默认width:auto和height:auto。这就是原因，它总是能够扩展自己。如果您尝试将td设为固定width，则会垂直缩放。您可以通过为其提供固定的height和width以及display:inline-block;

来停止此操作 div也是如此。但是在div的情况下，您不需要指定display：inline-block;

你需要给你的td（第一个样本）或div（第二个样本）一个固定的宽度和高度，以隐藏溢出，即使overflow:hidden;工作。

基于表格的布局：

在中间td尝试此css：请参阅此fiddle

.middle
{
    height:20px;
    width:70%;
    overflow:hidden; 
    display:inline-block; /*add this property also for the td */
}

基于div的布局

给你的div这个css：看这个fiddle

.middle
{
    float:left;
    width:40%; 
    height:20px; 
    overflow:hidden;
}

如何使用html / css使表只有一行高？

2 个答案:

CSS

标记