1

由于jQuery 的 Sortable 存在一些细微差别，我在 HTML 中显示了一个表格元素，但使用 's 来创建列而不是 's （下面和在这个小提琴中）：

<style>        
  /* Title row for an action/item */
  .item-row {
    display: table-row;
  }

  /* Keep icon columns narrow */
  .icon_column { 
    display: table-cell;
    width: 20px;
  }

  /* Item columns that are not icons */
  .name_column {
    display: table-cell;
  }    

  .extra_column {
    display: table-cell;
    float: right;
  }
</style>
<table class='table table-condensed'>
  <thead>
    <tr class='table_header'>
      <th>
        <div class='item-row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name</span>
          <span class='extra_column'>Date</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 1</span>
          <span class='extra_column'>Date 1</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Row 2 Name 2</span>
          <span class='extra_column'>Date 2</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 3</span>
          <span class='extra_column'>Date 3</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

我希望每个项目行显示为一行，其中 extra_column 一直浮动到右侧。extra_column 似乎在右侧，但整个项目行似乎默认为两行。

如何更正此 CSS？​</p>

4

2 回答 2

2

这是你需要的吗？

http://jsfiddle.net/QgpRY/2/

CSS 标记：

.extra_column {
    display: table-cell;
    text-align: right; /*use this instead*/
    /*float: right;*/ /*this was the problem*/
  }

正如您在最后一个示例中看到的那样，它向右对齐。

更新

对于您的要求，这应该是一个很好的解决方案：

http://jsfiddle.net/QgpRY/12/

  /* Keep icon columns narrow */
  .icon_column { 
    display: table-cell;
    width: 20px !important;
  }

  /* Item columns that are not icons */
  .name_column {
    display: table-cell;
    width:81% !important;
  }    

  .extra_column {
    display: table-cell;
    text-align: right;
    width: 50px !important;
  }

如果您可以将 all 更改为<div>'s会容易得多

希望能帮助到你！

于 2012-10-09T17:13:10.117 回答
1

这是你要找的吗？

我基本上将两组跨度包装在另一个跨度中。第一组获得浮动：左，第二组获得浮动：右。

CSS： 

.left { float:left; }
.right { float:right;}

HTML：

<div class='item-row'>
  <span class='left'>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='name_column'>Name</span>
  </span>
  <span class='right'>
    <span class='extra_column'>Date</span>
  </span>
</div>

我必须补充一点，当 1 行的内容扩展它获得的空间（宽度）时，就会出错。我不确定如何实现 :)

[更新]
通过给 name_column 一个固定的宽度（比如 150px），你可以摆脱上面提到的问题。当最后一列数据太多时，它仍然会出错。这可能也可以通过给定一个固定宽度来解决。如果您希望它跨越“页面”，您可以摆脱 div 包装器（“table_container”）。

于 2012-10-09T17:42:18.763 回答