div对齐创建新行

Question

我正在使用以下代码

​<div align="left">
Line 1
</div>
<div align="right">
Line 2
</div>

我期望左侧的输出为Line 1而右侧的输出为Line2，但是输出为两行。我怎么能在一行中得到这个？

jsfiddle

Answer 1

<div style="float: left">Line 1</div>
<div style="text-align: right">Line 2</div>

Answer 2

我假设你是HTML / CSS的新手，所以我建议你阅读一些关于样式如何工作的初学者教程。

默认情况下，div元素设置为“display：block”，因此您看到的是预期的行为。第一个div的宽度占据了父元素的整个宽度，所以当渲染第二个div时，它会下降到下面的一行（因为它不再适合“第一个div”旁边的那个。

正如其他答案所述，您希望将样式设置为向左或向右浮动（元素的宽度将相应更改）。

这是新的小提琴： http://jsfiddle.net/7zqJY/3/

Answer 3

<div style="float:left; width:100px;">
  Line 1
</div>
<div style="float:left; width:100px;">
  Line 2
</div>
​