将第一个div对齐，然后将其后的div对齐 [英] Align first div to left with subsequent divs aligned right

问题描述

我希望在同一水平线上显示三段文字，如下所示：

  | | 
 |第一章语言：英语| 
 | | 
  

我使用 | 来表示窗户的极端左侧或右侧。这是我现在所拥有的：

 < div> 
< div>第一章< / div> 
< div>语言：< / div> 
< div>英语< / div> 
< / div> 
  

文字英文最终会被替换为一个组合框。我应该如何设计我的div？

解决方案

#container {display： flex;}＃容器> div：first-child {margin-right：auto;}

< div id =container> < div>第一章< / div> < DIV>语言：&安培; NBSP;< / DIV> < div> English< / div>< / div>

$ b

无论您最终在右侧有一个还是两个div（取决于您的组合框设置），上述方法都可以使用。它基本上保留了第一个红色的左边和其他所有其他的东西齐平。

更多细节在这里：

• 使用Flexbox水平对齐三个Div


• 调整Flex项目的方法

---

浏览器支持： 所有主流浏览器均支持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:&nbsp;</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:

• Aligning Three Divs Horizontally Using Flexbox
• Methods for Aligning Flex Items

---

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