简体   繁体   中英

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

I want to achieve something like this:

所需结果

With the following html code:

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

Is there a way to achieve this using pure css? Bonus points if the the right-aligned div can be vertically centered.

Thanks :)

Fiddle

As requested in your comment ive added it as a answer.

Something like this? jsfiddle.net/cob1wyz9/3

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

Something like this...

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM