使用display：table时'浮动'右列？

Question

我使用显示表作为我网站的3列部分。我这样做，因为我需要垂直居中第一列的内容。

如何在保持文本左对齐的同时将第三列向右移动？

<span class="cont">
  <span class="one">One</span>
  <span class="two">One</span>
  <span class="three">
    <div class="a">Some text and A</div>
    <div class="b">Some more text and B</div>
  </span>
</span>

.cont {
  display: table;
  border: 1px solid black;
  width: 100%;
}
.one,
.two,
.three {
  display: table-cell;
}
.one {
  background: grey;
  vertical-align: middle;
}
.two {
  background: green;
}

http://codepen.io/anon/pen/azbmrP

Answer 1

一个简单的解决方案是使用float: right到.three课程和vertical-align: top到.two课程：

.cont {
  display: table;
  border: 1px solid black;
  width: 100%;
}
.one,
.two,
.three {
  display: table-cell;
}
.one {
  background: grey;
  vertical-align: middle;
}
.two {
  background: green;
  vertical-align: top;
}
.three {
  float: right;
}

<span class="cont">
  <span class="one">One</span>
<span class="two">One</span>
<span class="three">
    <div class="a">Some text and A</div>
    <div class="b">Some more text and B</div>
  </span>
</span>

Answer 2

使用

.three
{
  float:right;

}

http://codepen.io/anon/pen/raNMXr

Answer 3

DEMO

<span class="cont">
  <span class="one">One</span>
  <span class="two">One</span>
  <span class="three">
    <div class="set">
    <div class="a">Some text and A</div>
    <div class="b">Some more text and B</div>
    </div>
  </span>
</span>

.set{ float:right;}

Answer 4

这是一个解决方案：

.three > div {

浮动：对; }

并且您可以在第一个div之后添加<br>标记。

链接：http://jsfiddle.net/7081odd1/

Answer 5

.table { display: table; margin-left: auto;}