Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/fortran/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将div定位到左侧,并在容器内右对齐div_Html_Css_Alignment - Fatal编程技术网

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

Html 将div定位到左侧,并在容器内右对齐div,html,css,alignment,Html,Css,Alignment,我想实现这样的目标: 使用以下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

我想实现这样的目标:

使用以下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>

右对齐的div
乱数假文
益智
其他
随机的
特克斯
有没有一种方法可以使用纯css实现这一点?如果右对齐的div可以垂直居中,则可获得额外点数

谢谢:)

像这样的东西

*{框大小:边框框;}
.container{宽度:40%;}
.container>div{width:50%;float:right;clear:right;}
.container>div.floatingLeft{float:left;文本对齐:right;padding right:3%}

右对齐的div
乱数假文
益智
其他
随机的
特克斯
类似这样的东西

*{框大小:边框框;}
.container{宽度:40%;}
.container>div{width:50%;float:right;clear:right;}
.container>div.floatingLeft{float:left;文本对齐:right;padding right:3%}

右对齐的div
乱数假文
益智
其他
随机的
特克斯
类似这样的东西

*{框大小:边框框;}
.container{宽度:40%;}
.container>div{width:50%;float:right;clear:right;}
.container>div.floatingLeft{float:left;文本对齐:right;padding right:3%}

右对齐的div
乱数假文
益智
其他
随机的
特克斯
类似这样的东西

*{框大小:边框框;}
.container{宽度:40%;}
.container>div{width:50%;float:right;clear:right;}
.container>div.floatingLeft{float:left;文本对齐:right;padding right:3%}

右对齐的div
乱数假文
益智
其他
随机的
特克斯

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

像这样的?jsfiddle.net/cob1wyz9/3

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

根据你评论中的要求,我把它作为一个答案加了上去

像这样的?jsfiddle.net/cob1wyz9/3

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

根据你评论中的要求,我把它作为一个答案加了上去

像这样的?jsfiddle.net/cob1wyz9/3

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

根据你评论中的要求,我把它作为一个答案加了上去

像这样的?jsfiddle.net/cob1wyz9/3

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

Jsfiddle作为一个起点:您可以编辑您的原始问题,而不是发布这样的评论:?@GMolenaar,这几乎是完美的。特别是考虑到我这样做是为了替代使用html表。将其作为答案发布,这样我就可以将其标记为已解决。Jsfiddle作为起点:您可以编辑原始问题,而不是发布类似这样的评论:?@GMolenaar,这几乎是完美的。特别是考虑到我这样做是为了替代使用html表。将其作为答案发布,这样我就可以将其标记为已解决。Jsfiddle作为起点:您可以编辑原始问题,而不是发布类似这样的评论:?@GMolenaar,这几乎是完美的。特别是考虑到我这样做是为了替代使用html表。将其作为答案发布,这样我就可以将其标记为已解决。Jsfiddle作为起点:您可以编辑原始问题,而不是发布类似这样的评论:?@GMolenaar,这几乎是完美的。特别是考虑到我这样做是为了替代使用html表。把它作为答案贴出来,这样我就可以把它标记为已解决。非常好,但硬编码宽度让我觉得必须有更好的方法。非常好,但硬编码宽度让我觉得必须有更好的方法。非常好,但硬编码宽度让我觉得必须有更好的方法。非常好,但有硬编码宽度宽度让我觉得必须有更好的方法。