在容器内将div靠左对齐并向右对齐div

Question

我想实现以下目标：

使用以下html代码：

<div class="container">
    <div class="floatingLeft">A right-aligned div</div>
    <div class="a">Lorem Ipsum</div>
    <div class="b">Ipsum Lorem</div>
    <div class="c">Other</div>
    <div class="d">Random</div>
    <div class="e">Tex</div>
</div>

有没有办法使用纯CSS实现此目的？ 如果右对齐的div可以垂直居中，则可以得到加分。

谢谢 ：）

小提琴

Answer 1

根据您的评论，我将其添加为答案。

像这样吗 jsfiddle.net/cob1wyz9/3

.container {
   display: table;
}
.floatingLeft {
   text-align: right;
   display: table-cell;
   vertical-align: middle;
}

Answer 2

像这样

 * {box-sizing: border-box;} .container {width: 40%;} .container > div {width: 50%; float: right; clear:right;} .container > div.floatingLeft {float: left; text-align: right; padding-right: 3%} 

 <div class="container"> <div class="floatingLeft">A right-aligned div</div> <div class="a">Lorem Ipsum</div> <div class="b">Ipsum Lorem</div> <div class="c">Other</div> <div class="d">Random</div> <div class="e">Tex</div> </div>