在容器内将 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 可以垂直居中，则加分。

谢谢:)

Fiddle

Answer 1

像这样...

* {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>

Answer 2

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

是这样的吗？ jsfiddle.net/cob1wyz9/3

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

在容器内将 div 右对齐 div 定位到左侧

Positioning a div to the left with right-aligned div inside a container

html

css

alignment