[英]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: 使用以下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>
Is there a way to achieve this using pure css? 有没有办法使用纯CSS实现此目的? Bonus points if the the right-aligned div can be vertically centered. 如果右对齐的div可以垂直居中,则可以得到加分。
Thanks :) 谢谢 :)
As requested in your comment ive added it as a answer. 根据您的评论,我将其添加为答案。
Something like this? 像这样吗 jsfiddle.net/cob1wyz9/3 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.