0

我正在尝试找到一种使用 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>
4

2 回答 2

2

你也可以使用基于 div 的布局

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>
于 2013-04-19T15:27:26.890 回答
0

您的中间 td 没有任何width或height指定。因此，它具有默认值width:auto和height:auto. 这就是为什么，它总是扩大自己的规模。如果您尝试给您的 td 一个 fixed width，它将垂直缩放。你可以通过给它一个固定的height和width连同display:inline-block;

div 也是如此。但如果是 div，则不需要指定 display:inline-block;

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

基于表格的布局：

在你中间试试这个 css td：看看这个小提琴

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

基于 div 的布局

给你的 div 这个 css：看这个小提琴

.middle
{
    float:left;
    width:40%; 
    height:20px; 
    overflow:hidden;
}
于 2013-04-19T15:22:43.013 回答