Question

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

|                                                            |
| Chapter one                              Language: English |               
|                                                            |

我使用|来表示窗口的最左侧或右侧。这就是我现在所拥有的：

<div>
<div>Chapter one</div>
<div>Language:</div>
<div>English</div>
</div>

文本English最终将被组合框取代。我应该如何设计我的div？

Answer 1

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

您最终是否在右侧有一个或两个div（取决于您的组合框设置），上述方法将起作用。它基本上保持第一个div齐左，其他所有刷新。

此处有更多详情：

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 2

实现此目的的最简单方法是使用表

<table>
   <tr>
        <td style="align:left;">Chapter One</td>
        <td style="align:right;">Language: English</td>
    </tr>
</table>

Answer 3

在嵌套float中使用div可以是解决方案

<div>Chapter one</div>
<div>
    <div style="float:left;">Language:</div>
    <div style="float:right;">English</div>
</div>
</div>

float属性用于指定元素是否可以浮动。不要忘记将clear用于浮动元素以下的元素。

将第一个div与左对齐，后续div对齐

3 个答案: