表定位SASS

Question

我正在尝试使用SASS将一些HTML元素放入一个表中，如下所示：

http://tinypic.com/r/2dkzfao/8

理想情况下，我想在不必更改HTML的情况下设置样式，以便内容与样式分离。这样做的最佳方式是什么？

这就是我的HTML：

<div class="shortcut col-xs-6">
  <div class="keyCombination"> ctrl + c </div>
  <div class="application"> Webstorm </div>
  <div class="description"> Copy </div>
  <div class="operatingSystem"> Windows 8 </div>
</div>

我的SASS：

.shortcut {
    border: 1px solid #cccccc;
    background: #fffc70;
    display: table;
    height: 150px;
    width: 100%;
    text-align:center;
    .keyCombination {
        height: 100%;
        width: 50%;
        font-size: 300%;
        border-right: 1px solid #cccccc;
        display: table-cell;
        vertical-align: middle;
        text-align:left;
    }
    .application {
      border-bottom: 1px solid #cccccc;
    }
    .description {
    }
    .operatingSystem {
      border-top: 1px solid #cccccc;
      vertical-align: middle;
    }
}

http://plnkr.co/edit/Fs7WSq4NYzempzxaVIMZ?p=preview

Answer 1

.col-xs-6有padding-right：15px，我猜你不需要。删除它或覆盖它，这样你就会看到右侧元素的边框将触及方框的末尾。

您可以使用％-min / height in％来获得右侧所需的对齐方式。例如：

.description {
    height: 70%
}