将第一个 div 向左对齐,随后的 div 向右对齐 [英] Align first div to left with subsequent divs aligned right
问题描述
我想在同一条水平线上显示三段文字,如下:
<代码>|||第一章语言:英语|||
我使用 |
表示窗口的最左侧或最右侧.这就是我现在所拥有的:
<div>第一章</div><div>语言:</div><div>英文</div>
文本English
最终会被一个组合框取代.我应该如何设计我的 div?
#container {显示:弹性;}#容器>div:第一个孩子{右边距:自动;}
<div>第一章</div><div>语言: </div><div>英文</div>
无论您最终在右侧有一个还是两个 div(取决于您的组合框设置),上述方法都适用.它基本上保持第一个 div 向左对齐,其他所有内容向右对齐.
此处有更多详细信息:
<小时>浏览器支持: Flexbox 被所有主流浏览器支持,除了 IE <10.一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 供应商前缀.要快速添加前缀,请使用 Autoprefixer.此答案中的更多详细信息.
I wish to display three pieces of text on the same horizontal line, as follows:
| |
| Chapter one Language: English |
| |
I am using |
to represent either the extreme left or right of the window. This is what I have now:
<div>
<div>Chapter one</div>
<div>Language:</div>
<div>English</div>
</div>
The text English
will eventually be replaced by a combo box. How should I style my divs?
#container {
display: flex;
}
#container > div:first-child {
margin-right: auto;
}
<div id="container">
<div>Chapter one</div>
<div>Language: </div>
<div>English</div>
</div>
Whether you ultimately have one or two divs on the right (depending on your combo box set-up), the method above will work. It basically keeps the first div flush left and everything else flush right.
More details here:
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
这篇关于将第一个 div 向左对齐,随后的 div 向右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!