在容器內將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>